How to add multiple series in single page in Flutter CircularChart?

This article demonstrates how to add multiple doughnut series in single page using the SfCircularChart widget.

To achieve the desired visualization of multiple doughnut series, you can use the Stack widget to layer two or more SfCircularChart widgets. By adjusting the radius property within each DoughnutSeries, multiple doughnut series can be effectively displayed on the same page, creating a visually appealing and informative chart. Additionally, you can position the Legend based on the offset property of Legend for each DoughnutSeries. This approach allows for precise control over the placement and appearance of the chart elements, enhancing the overall clarity and presentation of the data.

The following steps outline how to add multiple doughnut series in single chart page:

Step 1: Prepare chart data and palette color.
Define two separate datasets and two palette lists for the series that will be used in the two doughnut series.

List<ChartSampleData> chartData = [
  ChartSampleData('35%', 35),
  ChartSampleData('28%', 28),
  ChartSampleData('34%', 34),
  ChartSampleData('32%', 32),
  ChartSampleData('40%', 40),
  ChartSampleData('20%', 20)
];

List<ChartSampleData> chartData2 = [
  ChartSampleData('20%', 20),
  ChartSampleData('25%', 25),
  ChartSampleData('32%', 32),
  ChartSampleData('40%', 40),
  ChartSampleData('25%', 25),
  ChartSampleData('18%', 18)
];

List<Color> paletteColorOuterDoughnut = [
  Colors.amber,
  Colors.red,
  Colors.deepPurple,
  Colors.deepOrange,
  Colors.blueGrey,
  Colors.green,
];

List<Color> paletteColorInnerDoughnut = [
  Colors.amber.shade200,
  Colors.red.shade200,
  Colors.deepPurple.shade200,
  Colors.deepOrange.shade200,
  Colors.blueGrey.shade200,
  Colors.green.shade200,
];

Step 2: Create the DoughnutSeries.
Using the Stack widget, overlay two SfCircularChart widgets on top of each other based on the radius property. If legends need to be displayed, set the offset for each legend to ensure visibility for both DoughnutSeries.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text('Syncfusion Flutter chart')),
      ),
      body: Stack(
        children: [
          SfCircularChart(
            palette: paletteColorOuterDoughnut,
            legend: const Legend(
              isVisible: true,
              offset: Offset(40, 0),
            ),
            series: <CircularSeries>[
              DoughnutSeries<ChartSampleData, String>(
                animationDuration: 0,
                radius: '60%',
                strokeColor: Colors.white,
                dataSource: chartData,
                xValueMapper: (ChartSampleData data, _) => data.x,
                yValueMapper: (ChartSampleData data, _) => data.y,
                dataLabelMapper: (ChartSampleData data, _) =>
                    '${data.y.toInt()}%',
                dataLabelSettings: const DataLabelSettings(
                  isVisible: true,
                ),
              )
            ],
          ),
          SfCircularChart(
            palette: paletteColorInnerDoughnut,
            legend: const Legend(
              isVisible: true,
              offset: Offset(-100, 0),
            ),
            series: <CircularSeries>[
              DoughnutSeries<ChartSampleData, String>(
                animationDuration: 0,
                radius: '38%',
                strokeColor: Colors.white,
                dataSource: chartData2,
                xValueMapper: (ChartSampleData data, _) => data.x,
                yValueMapper: (ChartSampleData data, _) => data.y,
                dataLabelMapper: (ChartSampleData data, _) =>
                    '${data.y.toInt()}%',
                dataLabelSettings: const DataLabelSettings(
                  isVisible: true,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

By following these steps and the provided code snippet, you can successfully add multiple doughnut charts on a single page in Flutter.

View the sample in GitHub.

Conclusion

I hope you enjoyed learning about how to add multiple series in single page in Flutter CircularChart.

You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter CartesianChart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!