Flutter Syncfusion SfCartesianChart - How to use single yValueMapper to all of your StackedColumnSeries

Question

To Clarify , I just want to know, if it's possible to use SfCartesianChart with StackedColumnSeries to use Single yValueMapper's Variable , so later on if i put many data i would not declare so many variable for yValueMapper like this:

class ChartSampleData {
  ChartSampleData(
      {this.x,
      this.y,
      this.yValue1,
      this.yValue2,
      this.yValue3
      this.yValue4,
      this.xValue,
      this.pointColor,
      this.size,
      this.text,
      this.open,
      this.close});

  dynamic x;
  num y;
  num yValue1;
  num yValue2;
  num yValue3;
  num yValue4;
  dynamic xValue;

  Color pointColor;
  num size;
  String text;
  num open;
  num close;
}

because the data that i will put is based on the database.

I tried doing these I only used y to my yValueMapper,

Code

<StackedColumnSeries<ChartSampleData, String>>[
      StackedColumnSeries<ChartSampleData, String>(
          enableTooltip: true,
          dataSource: [
            ChartSampleData(x: '1:00 PM', y: 1),
            ChartSampleData(x: '2:00 PM', y: 2),
            ChartSampleData(x: '3:00 PM', y: 3),
          ],
          xValueMapper: (ChartSampleData sales, _) => sales.x,
          yValueMapper: (ChartSampleData sales, _) => sales.y,
          name: 'Coupon A'),
      StackedColumnSeries<ChartSampleData, String>(
          enableTooltip: true,
          dataSource: [
            ChartSampleData(x: '4:00 PM', y: 4),
            ChartSampleData(x: '5:00 PM', y: 5),
            ChartSampleData(x: '6:00 PM', y: 6),
          ],
          xValueMapper: (ChartSampleData sales, _) => sales.x,
          yValueMapper: (ChartSampleData sales, _) => sales.y,
          name: 'Coupon B'),
    ];

Result - It's not starting at 0 because i used the same yValueMapper which is the y

Answer 1

Query #1: (I just want to know, if it's possible to use SfCartesianChart with StackedColumnSeries to use Single yValueMapper's Variable) We have analyzed on the above query and if you want to use single yValueMapper’s variable for the all the series in the chart, then the chart data source list for the all the series must be different. For example, say that you are having two StackedColumnSeries initialized in your chart and their chart data source list is of type (say SalesData class whose fields are SalesData(x,y) respectively) with different data points values for each series and in this case, as only the data points values of the chart is only different, you can use the same y variable for both series yValueMapper with maintaining a separate data source list for each series. Please refer the code snippet below.

    SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            series: <ChartSeries<SalesData, String>>[
              StackedColumnSeries<SalesData, String>(
                dataSource: <SalesData>[ // Separate data source maintained for series - 1
                  SalesData('Jan', 35),
                  SalesData('Feb', 28),
                  SalesData('Mar', 34),
                  SalesData('Apr', 32),
                  SalesData('May', 40)
                ],
                xValueMapper: (SalesData sales, _) => sales.x,
                yValueMapper: (SalesData sales, _) => sales.y, // same y variable used but assign y data value from series -1 data source.
              ),
              StackedColumnSeries<SalesData, String>(
                dataSource: <SalesData>[ // // Separate data source maintained for series – 2
                  SalesData('Jan', 25),
                  SalesData('Feb', 45),
                  SalesData('Mar', 24),
                  SalesData('Apr', 12),
                  SalesData('May', 27)
                ],
                xValueMapper: (SalesData sales, _) => sales.x,
                // same y variable used but assign y data value from series -2 data source.
                yValueMapper: (SalesData sales, _) => sales.y, 
              )
            ]
)

// Initialized class for storing the data points values.
class SalesData {
  SalesData(this.x, this.y);

  final String x;
  final double y;
}

Screenshot:

StackColumnChart

The sample for reference can be found below.

https://drive.google.com/file/d/1oFrdB7INBycMgv57rl747fixexCcGSbj/view?usp=sharing

Query #2: (It's not starting at 0 because I used the same yValueMapper which is the y)

We have analyzed on the above query with the provided code snippet and the second stacked column series is not staring at 0 is not because of the usage of same yValyeMapper for both series. The default behaviour of the stacked column chart is that the data series are stacked one on top of the other in vertical columns. And so, in your scenario, you have used different x-axis category values for rendering the series and due to this only, the second series is moved after the first series and got rendered. To avoid this type of rendering, you can set the arrangeByIndex property of CategoryAxis to true which will render the series based on the category axis index values. Please refer the code snippet below for further reference.

SfCartesianChart(
            primaryXAxis: CategoryAxis(
                arrangeByIndex: true // Arranges the series base on the axis index values
            ),
            Series: <StackedColumnSeries<ChartSampleData, String>>[
      StackedColumnSeries<ChartSampleData, String>(
          enableTooltip: true,
          dataSource: [
            ChartSampleData(x: '1:00 PM', y: 1),
            ChartSampleData(x: '2:00 PM', y: 2),
            ChartSampleData(x: '3:00 PM', y: 3),
          ],
          xValueMapper: (ChartSampleData sales, _) => sales.x,
          yValueMapper: (ChartSampleData sales, _) => sales.y,
          name: 'Coupon A'),
      StackedColumnSeries<ChartSampleData, String>(
          enableTooltip: true,
          dataSource: [
            ChartSampleData(x: '4:00 PM', y: 4),
            ChartSampleData(x: '5:00 PM', y: 5),
            ChartSampleData(x: '6:00 PM', y: 6),
          ],
          xValueMapper: (ChartSampleData sales, _) => sales.x,
          yValueMapper: (ChartSampleData sales, _) => sales.y,
          name: 'Coupon B'),
    ];
)

For further reference on the arrangeByIndex property, please check the user guide below.

https://help.syncfusion.com/flutter/cartesian-charts/axis-types#indexed-category-axis