We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback


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,

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;
    }

Learning resources

Navigate to GitHub code used to configure the Flutter funnel chart

GitHub Code

The Flutter Funnel Chart configuration code is available in GitHub.

Navigate to the options available in User Guide to customize the Flutter funnel chart

Flutter Funnel Chart User Guide

Learn available options to customize the Flutter Funnel Chart.

Navigate to the API references documentation of Flutter Funnel Chart

Flutter Funnel Chart API Reference

Explore the Flutter Funnel Chart APIs.


Scroll up icon