100% Stacked area Chart in Flutter Cartesian Charts (SfCartesianChart)

9 Jun 20215 minutes to read

To create a Flutter 100% stacked area chart quickly, you can check this video.

To render a 100% stacked area chart, create an instance of StackingArea100Series and add to the series collection property of SfCartesianChart. You can use the following properties to customize the 100% stacked area appearance.

  • color - changes the color of the series.
  • opacity - controls the transparency of the chart series.
  • borderWidth - changes the stroke width of the series.
  • borderColor - changes the stroke color of the series.
  • borderDrawMode - specifies the type of the border mode and it defaults to top.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                StackedArea100Series<ChartData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.year,
                                    yValueMapper: (ChartData sales, _) => sales.sales1
                                ),
                                StackedArea100Series<ChartData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.year,
                                    yValueMapper: (ChartData sales, _) => sales.sales2
                                ),
                                StackedArea100Series<ChartData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.year,
                                    yValueMapper: (ChartData sales, _) => sales.sales3
                                ),
                                StackedArea100Series<ChartData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.year,
                                    yValueMapper: (ChartData sales, _) => sales.sales4
                                )
                            ]
                        )
                    )
                )
            );
        }

    Stacked 100Area chart