Hi,
I am designing a StackedColumnChart to display some data and I noticed that the sum of the bars is not displaying correctly.
In the image below, the green and the red column should sum to 13250 (the height of the blue column). However, this is not the case, as shown.
Here is the data:
dataSource: cashFlowChartData,
xValueMapper: (CashFlowChartData data, _) => data.x,
yValueMapper: (CashFlowChartData data, _) => data.prev == 0 ? null : data.prev,
color: Colors.blue,
groupName: 'A',
enableTooltip: true,
sortingOrder: SortingOrder.ascending,
name: 'Previsto',
dataLabelSettings: DataLabelSettings(isVisible: false, ),
sortFieldValueMapper: (CashFlowChartData data, _) => data.x));
chartSeries.add(StackedColumnSeries<CashFlowChartData, DateTime>(
dataSource: cashFlowChartData,
xValueMapper: (CashFlowChartData data, _) => data.x,
yValueMapper: (CashFlowChartData data, _) => data.payed == 0 ? null : data.payed,
color: Colors.green,
groupName: 'B',
emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.gap),
enableTooltip: false,
width: 0.4,
sortingOrder: SortingOrder.ascending,
name: 'Pago',
dataLabelSettings: DataLabelSettings(isVisible: true, ),
sortFieldValueMapper: (CashFlowChartData data, _) => data.x));
chartSeries.add(StackedColumnSeries<CashFlowChartData, DateTime>(
dataSource: cashFlowChartData,
xValueMapper: (CashFlowChartData data, _) => data.x,
yValueMapper: (CashFlowChartData data, _) => data.onDate == 0 ? null : data.onDate,
color: Colors.yellow,
groupName: 'B',
emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.gap),
enableTooltip: false,
width: 0.4,
sortingOrder: SortingOrder.ascending,
name: 'Em dia',
dataLabelSettings: DataLabelSettings(isVisible: true, ),
sortFieldValueMapper: (CashFlowChartData data, _) => data.x));
chartSeries.add(StackedColumnSeries<CashFlowChartData, DateTime>(
dataSource: cashFlowChartData,
xValueMapper: (CashFlowChartData data, _) => data.x,
yValueMapper: (CashFlowChartData data, _) => data.late == 0 ? null : data.late,
color: Colors.red,
groupName: 'B',
emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.gap),
enableTooltip: false,
width: 0.4,
sortingOrder: SortingOrder.ascending,
name: 'Atrasado',
dataLabelSettings: DataLabelSettings(isVisible: true, ),
sortFieldValueMapper: (CashFlowChartData data, _) => data.x));
======================================================================================
The CashFlowChartData class
class CashFlowChartData {
CashFlowChartData(this.x, this.prev, this.exec, this.payed, this.onDate, this.late);
final DateTime x;
final double? prev;
final double? exec;
final double? payed;
final double? onDate;
final double? late;
}
======================================================================================
The SfCalendar instance
child: SfCartesianChart(
primaryXAxis: DateTimeCategoryAxis(
dateFormat: DateFormat('dd/MM'),
labelStyle: TextStyle(
color: Colors.white,
),
title: AxisTitle(
text: 'Data',
textStyle: TextStyle(
color: Colors.white,
fontFamily: 'Roboto',
fontSize: 12,
)),
labelRotation: 45,
// intervalType: DateTimeIntervalType.days,
crossesAt: 0,
),
primaryYAxis: NumericAxis(
labelStyle: TextStyle(
color: Colors.white,
),
title: AxisTitle(
text: 'Valor',
textStyle: TextStyle(
color: Colors.white,
fontFamily: 'Roboto',
fontSize: 12,
)),
),
legend: Legend(
isVisible: true,
borderColor: Colors.white,
borderWidth: 1,
// iconBorderWidth: 1,
// iconBorderColor: Colors.white,
textStyle: TextStyle(color: Colors.white),
backgroundColor: Colors.black,
toggleSeriesVisibility: true,
overflowMode: LegendItemOverflowMode.wrap,
height: '30%',
shouldAlwaysShowScrollbar: true,
position: LegendPosition.bottom,
),
enableSideBySideSeriesPlacement: false,
series: getChartData(),
tooltipBehavior: _tooltipBehavior,
));
==================================================================
Is it possible to tell me what am I doing wrong?
thanks in advance
Luiz
Hi Luiz,
You can achieve your requirement with the help of showCumulativeValues property which is available in the DataLabelSettings widget.
Code snippet:
StackedColumnSeries( dataSource: cumulativeData, xValueMapper: (SalesData sales, _) => sales.year, yValueMapper: (SalesData sales, _) => sales.sales, dataLabelSettings: const DataLabelSettings( isVisible: true, showCumulativeValues: true, ), ), |
Output:
Regards,
Hari Hara Sudhan. K
Hi.
Thanks for your answer.
Maybe I have expressed myself in a wrong way. The problem is that the red bar (9.350) should have finished exactly at the same high as the blue one:
Hi Luiz,
We have reviewed your query and found that the 3rd series is not rendering properly due to missing data points for empty values. We recommend adding null data points for these values, which should help you achieve your desired outcome. We have shared the code snippet and screenshot below for your reference.
Code snippet:
series: <ChartSeries>[ StackedColumnSeries<ChartSampleData, DateTime>( dataSource: <ChartSampleData>[ ChartSampleData(x: DateTime(2023, 02, 27), y: 900), ChartSampleData(x: DateTime(2023, 03, 06), y: 13250), ], groupName: 'A', ), StackedColumnSeries<ChartSampleData, DateTime>( dataSource: <ChartSampleData>[ ChartSampleData(x: DateTime(2023, 02, 27), y: 900), ChartSampleData(x: DateTime(2023, 03, 06), y: 3900), ], groupName: 'B', ), StackedColumnSeries<ChartSampleData, DateTime>( dataSource: <ChartSampleData>[ ChartSampleData(x: DateTime(2023, 02, 27), y: null), ChartSampleData(x: DateTime(2023, 03, 06), y: 9350), ], groupName: 'B', ), ] |
Screenshot:
Regards,
Yuvaraj.
Hi,
thanks for your suggestion. So, I printed out the values that I am displaying and I get this result:
2023-02-27 00:00:00.000, 400, 400, 0, 0, 400
2023-03-20 00:00:00.000, 100, 100, 100, 0, 0
2023-03-27 00:00:00.000, 250, 250, 0, 0, 250
2023-04-03 00:00:00.000, 575, 575, 375, 200, 0
2023-04-24 00:00:00.000, 325, 0, 0, 0, 0
where:
1st column: x
2nd column: group A -> white
3rd column: group B -> blue
4th column: group C -> green
5th column: group C -> yellow
6th column: group C -> red
You see, there is no null value anywhere, however, still get this result
This only happens when I have 2 values stacked in a column (green, yellow).
Any tip?
Hi Luiz,
We have checked your query with the shared data source information, but the reported issue is not reproduced at our end every stacked column is rendering properly. So, we kindly request you to share the complete chart code snippet and its data source, it will be more helpful to us to assist you in a better way.
Screenshot:
Regards,
Yuvaraj.
Hi,
first of all, thanks four your effort in helping me.
So, here is the code (attached) and the test data, as printed out in line 114
Group A and B display correctly, but group C, somehow, adds 125 units more in the last segment (200 is not 200, but 325)
Hi Luiz,
We have checked your code snippet and the issue getting reproduced at our end. We found that you have set the crossesAt value in the x-axis which is why the stacked column series is getting rendering like that. To resolve this please remove the crossesAt property then it will render properly. Currently, we are checking our source regarding this issue, and will update you the further information tomorrow we appreciate your patience until then.
Regards,
Yuvaraj.
Great news!!!
Thanks. It is working just fine now.
Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.