Flutter Funnel Chart | Visualize Data Easily

Overview

The Flutter Funnel Chart makes proportional comparison between values showcased as progressively decreasing. The segments in a funnel chart can be exploded and differentiated using different colors. You can create beautiful, animated, real-time and high-performance funnel chart that also supports the interactive features such as explode, tooltip and selection.

Beautiful Flutter Funnel Chart

Key features

Flutter chart shows the data labels

Data labels

Annotate data points with data labels to improve the readability of a chart.

Flutter chart shows the exploded funnel segment

Explode on touch

Explode segments in a Flutter Funnel Chart to differentiate it from other segments.

Flutter chart shows the funnel neck customization

Custom neck height

Customize the height of the neck in the Flutter Funnel Chart to improve readability and appearance.

Code example

Easily get started with the Flutter Funnel Chart using a few simple lines of DART code example as demonstrated below,

dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

@override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
            ChartData('Jan', 35),
            ChartData('Feb', 28),
            ChartData('Mar', 34),
            ChartData('Apr', 32),
            ChartData('May', 40)
        ];
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfFunnelChart(
                      series:FunnelSeries<ChartData, String>(
                            dataSource: chartData,
                            xValueMapper: (ChartData data, _) => data.x,
                            yValueMapper: (ChartData data, _) => data.y
                        )
                    )
                )
            )
        );
    }

    class ChartData {
      ChartData(this.x, this.y, [this.color]);
        final String x;
        final double y;
        final Color? color;
    }