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

9 Jun 202111 minutes to read

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

To render a 100% stacked line chart, create an instance of StackedLine100Series, and add it to the series collection property of SfCartesianChart. The following properties can be used to customize the appearance:

  • color - changes the color of the line.
  • opacity - controls the transparency of the chart series.
  • width - changes the stroke width of the line.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales2
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales3
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales4
                                )
                            ]
                        )
                    )
                )
            );
        }

    Stacked 100 line chart

    Dashed line

    The dashArray property of StackedLine100Series is used to render line series with dashes. Odd value is considered as rendering size and even value is considered as gap.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    dashArray: <double>[5,5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    dashArray: <double>[5,5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales2
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    dashArray: <double>[5,5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales3
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    dashArray: <double>[5,5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales4
                                )
                            ]
                        )
                    )
                )
            );
        }

    Dashed line chart