Multiple and Combinational Charts

21 Apr 2020 / 8 minutes to read

Multiple series

You can add multiple series to the series property of the SfCartesianChart class. By default, all the series are rendered based on the PrimaryXAxis and PrimaryYAxis in SfCartesianChart. If you want to plot different unit or value that is specific to a particular series, specify separate axis for that series using the xAxisName and yAxisName properties of series.

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

    Multiple series

    Also refer multiple axes for customizing the axis further.

    Combination series

    SfCartesianChart allows you to render a combination of different types of series. In the following code snippet, the column and line type series have been combined.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <CartesianSeries>[
                                // Render column series
                                ColumnSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y
                                ),
                                // Render line series
                                LineSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y2
                                )
                            ]
                        )
                    )
                )
            );
        }

    Combination series

    Limitation of combination chart

    • Cartesian type series cannot be combined with circular series (pie, doughnut, and radial bar).