Reputation: 59
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
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:
Upvotes: 1