Bubble Chart in Flutter Cartesian Charts (SfCartesianChart)

5 Oct 202320 minutes to read

To render a bubble chart, create an instance of BubbleSeries, and add it to the series collection property of SfCartesianChart.

Bubble chart requires three fields (X, Y, and Size) to plot a point. Here, sizeValueMapper is used to map the size of each bubble segment from data source.

  • color - changes the color of the series.
  • opacity - controls the transparency of the chart series.
  • borderColor - changes the stroke width of the series.
  • borderWidth - changes the stroke color of the series.
@override
    Widget build(BuildContext context) {
         final List<ChartData> chartData = [
            ChartData(DateTime(2010), 35, 0.32),
            ChartData(DateTime(2011), 38, 0.21),
            ChartData(DateTime(2012), 34, 0.38),
            ChartData(DateTime(2013), 52, 0.29),
            ChartData(DateTime(2014), 40, 0.34)
        ];

        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: DateTimeAxis(),
                        series: <CartesianSeries>[
                            // Renders bubble chart
                            BubbleSeries<ChartData, DateTime>(
                                dataSource: chartData,
                                sizeValueMapper: (ChartData data, _) => data.size,
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y
                            )
                        ]
                    )
                )   
            )
        );
    }

    class ChartData {
        ChartData(this.x, this.y, this.size);
            final DateTime x;
            final double y;
            final double size;
    }

Bubble chart

Change the min and max radius of bubble

The minimumRadius property is used to change the minimum size of the series and the maximumRadius property is used to change the maximum size of the series.

@override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: DateTimeAxis(),
                        series: <CartesianSeries>[
                            BubbleSeries<ChartData, DateTime>(
                                dataSource: chartData,
                                sizeValueMapper: (ChartData data, _) => data.size,
                                // Minimum radius of bubble
                                minimumRadius:9, 
                                // Maximum radius of bubble
                                maximumRadius: 15, 
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y
                            )
                        ]
                    )
                )   
            )
        );
    }

Bubble size

Also refer, color palette, color mapping, animation, gradient and empty points for customizing the bubble series further.

Bubble with various color

Using the pointColorMapper and sizeValueMapper properties in the Cartesian charts, the Bubble series with different colors and sizes can be rendered.

@override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: CategoryAxis(),
                        series: <CartesianSeries>[
                            BubbleSeries<ChartData, String>(
                                dataSource: chartData,
                                sizeValueMapper: (ChartData data, _) => data.size,
                                pointColorMapper:(ChartData data, _) => data.pointColor,
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y
                            )
                        ]
                    )
                )   
            )
        );
    }

Bubble various color

Bubble with gradients

The gradient property is used to define the gradient colors. The colors from this property is used for series.

@override
    Widget build(BuildContext context) {
        final List<Color> color = <Color>[];
        color.add(Colors.blue[50]!);
        color.add(Colors.blue[200]!);
        color.add(Colors.blue);

        final List<double> stops = <double>[];
        stops.add(0.0);
        stops.add(0.5);
        stops.add(1.0);

        final LinearGradient gradientColors =
            LinearGradient(colors: color, stops: stops);

        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: CategoryAxis(),
                        series: <CartesianSeries>[
                            BubbleSeries<ChartData, String>(
                                dataSource: chartData,
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y,
                                 sizeValueMapper:(ChartData data, _) => data.size,
                                // Applies gradient color
                                gradient: gradientColors
                            )
                        ]
                    )
                )
            )
        );
    }

Bubble gradients

Bubble with multiple series

Using the datasource property in the Map charts, multiple series can be rendered in a bubble chart.

@override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        series: <CartesianSeries>[
                            BubbleSeries<ChartData, num>(
                                  dataSource: northAmerica,
                                  xValueMapper: (ChartData data, _) => data.xValue,
                                  yValueMapper: (ChartData data, _) => data.y,
                                  sizeValueMapper: (ChartData data, _) => data.size),
                            BubbleSeries<ChartData, num>(
                                  dataSource: europe,
                                  xValueMapper: (ChartData data, _) => data.xValue,
                                  yValueMapper: (ChartData data, _) => data.y,
                                  sizeValueMapper:(ChartData data, _) => data.size),
                            BubbleSeries<ChartData, num>(
                                  dataSource: asia,
                                  xValueMapper: (ChartData data, _) => data.xValue,
                                  yValueMapper: (ChartData data, _) => data.y,
                                  sizeValueMapper: (ChartData data, _) => data.size),
                            BubbleSeries<ChartData, num>(
                                  dataSource: africa,
                                  xValueMapper: (ChartData data, _) => data.xValue,
                                  yValueMapper: (ChartData data, _) => data.y,
                                  sizeValueMapper: (ChartData data, _) => data.size),
                        ]
                    )
                )   
            )
        );
    }

Bubble nultiple series

Note: You can refer to our Flutter Bubble Chart feature tour page for its groundbreaking feature representations. You can also explore our Flutter Bubble Chart example that shows how to easily configure with built-in support for creating stunning visual effects.