Flutter kyoto
Flutter kyoto

Reputation: 59

Flutter syncfusion bug with StackedColumnSeries

enter image description here

Why do all the elements in the chart not start from zero, but move to the top? I want to have my own data for each month (text) and they are separated. They can be grouped together, they can also be single. Code:

SfCartesianChart(
                                  primaryXAxis: CategoryAxis(),
                                  primaryYAxis: NumericAxis(minimum: 0),
                                  series: <ChartSeries>[
                                      StackedColumnSeries<TaskChartInfo, String>(
                                          groupName: 'Group A',
                                          dataSource: chartData,
                                          xValueMapper: (TaskChartInfo sales, _) => "Сент",
                                          yValueMapper: (TaskChartInfo sales, _) => 45),
                                      StackedColumnSeries<TaskChartInfo, String>(
                                          groupName: 'Group B',
                                          dataSource: chartData,
                                          xValueMapper: (TaskChartInfo sales, _) => "Сент",
                                          yValueMapper: (TaskChartInfo sales, _) => 32),
                                      StackedColumnSeries<TaskChartInfo, String>(
                                          groupName: 'Group B',
                                          dataSource: chartData,
                                          name: "Авг",
                                          enableTooltip: true,
                                          xValueMapper: (TaskChartInfo sales, _) => "Авг",
                                          yValueMapper: (TaskChartInfo sales, _) => 45),
                                      StackedColumnSeries<TaskChartInfo, String>(
                                          groupName: 'Group A',
                                          dataSource: chartData,
                                          xValueMapper: (TaskChartInfo sales, _) => "Дек",
                                          yValueMapper: (TaskChartInfo sales, _) => 100),
                                      StackedColumnSeries<TaskChartInfo, String>(
                                          groupName: 'Group B',
                                          dataSource: chartData,
                                          xValueMapper: (TaskChartInfo sales, _) => "Окт",
                                          yValueMapper: (TaskChartInfo sales, _) => 21)
                                    ])

Thank you in advance for the answer!

Upvotes: 0

Views: 183

Answers (1)

Lokesh Palani
Lokesh Palani

Reputation: 79

While grouping the stacked series, the series x-values should be same for grouping series. For example, stacked series1 and series 2 have groupName as 'Group A' means, both series should have same x values. You can achieve the requirement by changing the groupName value.

We have prepared and shared a code snippet below for your reference.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: SfCartesianChart(
        primaryXAxis: CategoryAxis(),
        primaryYAxis: NumericAxis(minimum: 0),
        series: <ChartSeries>[
          StackedColumnSeries<TaskChartInfo, String>(
              groupName: 'Group A',
              dataSource: chartData,
              color: Colors.blueAccent,
              xValueMapper: (TaskChartInfo sales, _) => "Сент",
              yValueMapper: (TaskChartInfo sales, _) => 45),
          StackedColumnSeries<TaskChartInfo, String>(
              groupName: 'Group A',
              dataSource: chartData,
              color: Colors.pinkAccent,
              xValueMapper: (TaskChartInfo sales, _) => "Сент",
              yValueMapper: (TaskChartInfo sales, _) => 32),
          StackedColumnSeries<TaskChartInfo, String>(
              groupName: 'Group B',
              dataSource: chartData,
              name: "Авг",
              enableTooltip: true,
              color: Colors.redAccent,
              xValueMapper: (TaskChartInfo sales, _) => "Авг",
              yValueMapper: (TaskChartInfo sales, _) => 45),
          StackedColumnSeries<TaskChartInfo, String>(
              groupName: 'Group C',
              dataSource: chartData,
              color: Colors.orangeAccent,
              xValueMapper: (TaskChartInfo sales, _) => "Дек",
              yValueMapper: (TaskChartInfo sales, _) => 100),
          StackedColumnSeries<TaskChartInfo, String>(
              groupName: 'Group D',
              dataSource: chartData,
              color: Colors.greenAccent,
              xValueMapper: (TaskChartInfo sales, _) => "Окт",
              yValueMapper: (TaskChartInfo sales, _) => 21)
        ],
      )),
    );
  }
}

class TaskChartInfo {
  TaskChartInfo(this.name, this.value);

  final String name;
  final int value;
}

List<TaskChartInfo> chartData = <TaskChartInfo>[
  TaskChartInfo("Сент", 45),
  TaskChartInfo("Авг", 32),
  TaskChartInfo("Дек", 100),
  TaskChartInfo("Окт", 100),
];

ScreenShot:

enter image description here

Upvotes: 1

Related Questions