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

21 May 2021 / 5 minutes to read

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
                            )
                        ]
                    )
                )
            )
        );
    }