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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


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

    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

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon