We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Sum of bars in a stackedcolumnchart is not correct

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: 

  • 2023-03-06 00:00:00.000 / 13250 / 3900 / 9350, 
And here the way I create the Chart objects:

======================================================================================
chartSeries.add(StackedColumnSeries<CashFlowChartData, DateTime>(
    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




9 Replies

HK Hariharasudhan Kanagaraj Syncfusion Team March 13, 2023 02:54 PM UTC

Hi Luiz,


You can achieve your requirement with the help of  showCumulativeValues property which is available in the DataLabelSettings widget. 


Code snippet:

StackedColumnSeries(

dataSourcecumulativeData,

xValueMapper: (SalesData sales_) => sales.year,

yValueMapper: (SalesData sales_) => sales.sales,

dataLabelSettingsconst DataLabelSettings(

isVisibletrue,

showCumulativeValuestrue,

            ),

          ),


Output:




Regards,

Hari Hara Sudhan. K



LR Luiz Renuncio March 13, 2023 03:02 PM UTC

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:

  • green (3.900) + red (9.350) = 13.250 (the blue column)

The showCumulative option is not exactly what I need, since I want to display the individual values for each column.

Any clue on that? Or this is this a bug?


YG Yuvaraj Gajaraj Syncfusion Team March 14, 2023 04:07 PM UTC

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.



LR Luiz Renuncio April 2, 2023 04:21 AM UTC

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?



YG Yuvaraj Gajaraj Syncfusion Team April 3, 2023 10:58 AM UTC

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.



LR Luiz Renuncio April 4, 2023 06:14 PM UTC

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

  • 2023-04-03 00:00:00.000, 575, 575, 375, 200, 0
The result is this chart



Group A and B display correctly, but group C, somehow, adds 125 units more in the last segment (200 is not 200, but 325)


Attachment: cashflow_chart02_ede99428.zip


YG Yuvaraj Gajaraj Syncfusion Team April 5, 2023 10:29 AM UTC

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.



LR Luiz Renuncio April 5, 2023 02:39 PM UTC

Great news!!!

Thanks. It is working just fine now.





YG Yuvaraj Gajaraj Syncfusion Team April 6, 2023 06:52 AM UTC

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.


Loader.
Up arrow icon