Funnel Chart

To render a funnel chart, create an instance of FunnelSeries, and add it to the series property of SfFunnelChart. The following properties are used to customize the appearance of a funnel segment:

  • opacity - Controls the transparency of the chart series.
  • borderWidth – Changes the stroke width of the series.
  • borderColor – Changes the stroke color of the series.
  • pointColorMapper – Maps the color from data source.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            series: FunnelSeries<ChartData, String>(
                                dataSource: [
                                    ChartData('Walnuts', 654),
                                    ChartData('Almonds', 575),
                                    ChartData('Soybeans', 446),
                                    ChartData('Black beans', 341),
                                    ChartData('Mushrooms', 296),
                                    ChartData('Avacado', 160),
                                ],
                                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;
        }

    Funnel chart

    Changing funnel size

    You can modify the size of funnel series using the height and width properties. It ranges from 0% to 100%.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            series: FunnelSeries<ChartData, String>(
                                height: '50%',
                                width: '50%',
                            )
                        )
                    )
                )
            );
        }

    Funnel size

    Changing neck size

    You can modify the neck size of funnel series using the neckHeight and neckWidth properties. It ranges from 0% to 100%.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            series: FunnelSeries<ChartData, String>(
                                neckHeight: '40%',
                                neckWidth: '10%',
                            )
                        )
                    )
                )
            );
        }

    Neck size

    Gap between segments

    You can control the gap between the two segments using the gapRatio property. It ranges from 0 to 1.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            series: FunnelSeries<ChartData, String>(
                                gapRatio: 0.1,
                            )
                        )
                    )
                )
            );
        }

    Funnel gap

    Explode segments

    You can explode a funnel segment using the explodeIndex property. The explodeOffset property is used to specify the exploded segment’s distance.

    Also, the segments can be exploded by tapping the segment.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            series: FunnelSeries<ChartData, String>(
                                explode: true,
                                explodeOffset: '5%',
                                explodeIndex: 2,
                            )
                        )
                    )
                )
            );
        }

    Explode

    Smart data labels

    The smartLabelMode property is used to place the data labels smartly. The smartLabelMode supports the following values:

    • shift - Shifts the data label position when a label intersects with other label, and it is the default value.
    • none - Renders all the data labels when intersect.
    • hide - Hides the intersecting data label.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            smartLabelMode: SmartLabelMode.shift,
                            series: FunnelSeries<ChartData, String>(
                                dataLabelSettings: DataLabelSettings(
                                    isVisible: true, 
                                    labelPosition: LabelPosition.inside
                                ),
                            )
                        )
                    )
                )
            );
        }

    Applying palette color

    The palette property is used to define colors for the series available in chart. By default, a set of 10 colors is predefined for applying it to the series. If the colors specified in the series are less than the number of series, then the remaining series will be filled with the specified palette colors rotationally.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfFunnelChart(
                            palette: <Color>[
                                Colors.teal,
                                Colors.orange,
                                Colors.brown
                            ]
                        )
                    )
                )
            );
        }

    Palette