How to show cumulative and non-cumulative values on the stacked column charts?
In this article, we explain how to show cumulative and non-cumulative values on the stacked column charts using the Flutter SfCartesianChart widget.
The Flutter cartesian chart has the showCumulativeValues property to show the cumulative values on the stacked chart types. However, in this article we will be showing non-cumulative values on the stacked column point and cumulative value on the top of the stacked column. The cumulative values can be shown using the annotation property and non-cumulative values are shown using the default dataLabelSettings feature.
The following steps explain how to show cumulative and non-cumulative values is StackedColumnSeries in the SfCartesianChart widget.
Step 1: Declare the cumulativeDataLabel to store cumulative data label values, and chartData variable to store the dataSource.
late List<String>? cumulativeDataLabel; late List<ChartData> chartData;
Step 2: Define the dataLabel and getAnnotation methods, the dataLabel method will return the list of cumulative data label string by adding the y value of all the series to the respective x value for showing at the top of each column. And the getAnnotation method will return the list of CartesianChartAnnotation.
// Method to return list of data label string
List<String> dataLabel() {
List<String> labels = [];
for (int i = 0; i < chartData.length; i++) {
labels.add((chartData[i].y1 +
chartData[i].y2 +
chartData[i].y3 +
chartData[i].y4)
.toString());
}
return labels;
}
// Method to return list of CartesianChartAnnotation
List<CartesianChartAnnotation> getAnnotation() {
cumulativeDataLabel = dataLabel();
final int padding = 2;
final List<CartesianChartAnnotation> annotations = [];
for (int i = 0; i < cumulativeDataLabel!.length; i++) {
annotations.add(CartesianChartAnnotation(
widget: Text(cumulativeDataLabel![i]),
coordinateUnit: CoordinateUnit.point,
x: chartData[i].x,
y: int.parse(cumulativeDataLabel![i]) + padding));
}
return annotations;
}
Step 3: In initState(), initialize the chartData variable that holds the data source and cumulativeDataLabel variable that holds the cumulative data label values.
void initState() {
chartData = <ChartData>[
ChartData('China', 11, 12, 13, 18),
ChartData('USA', 12, 14, 18, 23),
ChartData('UK', 14, 13, 15, 20),
ChartData('Brazil', 18, 16, 17, 22),
];
cumulativeDataLabel = dataLabel();
super.initState();
}
class ChartData {
ChartData(this.x, this.y1, this.y2, this.y3, this.y4);
final String x;
final num y1;
final num y2;
final num y3;
final num y4;
}
Step 4: Then initialize SfCartesianChart widget with multiple StackedColumnSeries and map the data points to each series, then assign the getAnnotation method to the annotations property.
SfCartesianChart( annotations: getAnnotation(), primaryXAxis: CategoryAxis(), series: <StackedColumnSeries<ChartData, String>>[ StackedColumnSeries<ChartData, String>( dataLabelSettings: const DataLabelSettings(isVisible: true), dataSource: chartData, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y1), StackedColumnSeries<ChartData, String>( dataLabelSettings: const DataLabelSettings(isVisible: true), dataSource: chartData, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y2), StackedColumnSeries<ChartData, String>( dataLabelSettings: const DataLabelSettings(isVisible: true), dataSource: chartData, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y3), StackedColumnSeries<ChartData, String>( dataLabelSettings: const DataLabelSettings(isVisible: true), dataSource: chartData, xValueMapper: (ChartData sales, _) => sales.x, yValueMapper: (ChartData sales, _) => sales.y4) ])
Thus, the cumulative and non-cumulative value shown in the chart as in the below screenshot.
