Column Series does not show when applying data checkbox
Hi,
I'm working with ColumnSeries of SfCartesianChart.
I have a column chart which shows two different data of different time set.I have implemented a checkbox at the bottom of the chart to turn on/off the data. However, when I turn off one of the data, the data that should show up in the chart does not show up.
I am not using the legend option because the design specifically wants to use checkbox for turning the data on/off, so I had to use another widget for the bottom checkbox.
Here is the screenshot of what is happening:
- Here, it looks like the data B has some value, but it is not showing
2. I have unchecked B, so now B series does not show up, but data is not showing for A although it is there
I have recreated the issue from the previous sample I have gotten and modifying the code. Please replace the main.dart code from bottom sample with my code to run it and see the issue. (it seems like I cannot attach my recreated sample because it's size is too large)
Sample: https://www.syncfusion.com/downloads/support/forum/167377/ze/F167377_stacked_zoom1522339048
My main.dart:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
void main() {
return runApp(_ChartApp());
}
class _ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: _MyHomePage(),
);
}
}
class _MyHomePage extends StatefulWidget {
// ignore: prefer_const_constructors_in_immutables
_MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<_MyHomePage> {
bool AChecked = true;
bool BChecked = true;
String type = 'monthly';
List<SetData> data_first=[
SetData(date: '2', num: 149.287),
SetData(date: '3', num: 438.721),
];
List<SetData> data_second=[
SetData(date: '2', num: 109.59600000000002),
SetData(date: '3', num: 399.846),
];
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Flutter chart'),
),
body: Center(
child: Column(
children: [
ABChart(
data_first: data_first,
data_second: data_second,
colec_time: ['20220201', '20220301'],
type: type,
checked: {
'Acheck' : AChecked,
'Bcheck' : BChecked,
},
),
Wrap(
alignment: WrapAlignment.start,
runSpacing: 5,
children: [
Container(
width: 150,
height: 24,
child: Row(
children: [
Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
activeColor: Color.fromRGBO(195, 231, 111, 1),
checkColor: Colors.white,
value: AChecked,
onChanged: (value) =>
setState((){
AChecked = value!;
}),
),
GestureDetector(
onTap: () {
setState((){
AChecked = !AChecked;
});
},
child: Text('A check'),
),
],
),
),
Container(
width: 150,
height: 24,
child: Row(
children: [
Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
activeColor: Color.fromRGBO(140, 140, 140, 1),
checkColor: Colors.white,
value: BChecked,
onChanged: (value) =>
setState((){
BChecked = value!;
}),
),
GestureDetector(
onTap: () {
setState((){
BChecked = !BChecked;
});
},
child: Text('B check'),
),
],
),
),
],
),
],
)));
}
}
class ABChart extends StatelessWidget {
final dynamic data_first;
final dynamic data_second;
final List<String> colec_time;
final String type;
final Map<String, bool> checked;
ABChart({
required this.data_first,
required this.data_second,
required this.colec_time,
required this.type,
required this.checked,
});
List<CartesianSeries> getCheckedItem() {
List<CartesianSeries> checkedItem = [];
if (checked['Acheck']!) {
checkedItem.add(
ColumnSeries<SetData, String>(
name: 'A',
dataSource: data_first,
xValueMapper: (SetData d, _) => d.date,
yValueMapper: (SetData d, _) => d.num,
color: Color.fromRGBO(195, 231, 111, 1),
),
);
}
if (checked['Bcheck']!) {
checkedItem.add(
ColumnSeries<SetData, String>(
name: 'B',
dataSource: data_second,
xValueMapper: (SetData d, _) => d.date,
yValueMapper: (SetData d, _) => d.num,
color: Color.fromRGBO(140, 140, 140, 1),
),
);
}
return checkedItem;
}
@override
Widget build(BuildContext context) {
return Container(
height: 180,
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(enablePanning: true,),
plotAreaBorderWidth: 0,
primaryXAxis: CategoryAxis(
axisLine: AxisLine(width: 0),
majorGridLines: MajorGridLines(width: 0),
majorTickLines: MajorTickLines(size: 0),
maximumLabels: 6,
),
primaryYAxis: NumericAxis(
rangePadding: ChartRangePadding.none,
isVisible: false,
),
trackballBehavior: TrackballBehavior(
activationMode: ActivationMode.singleTap,
tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
tooltipAlignment: ChartAlignment.center,
enable: true,
lineColor: Color.fromRGBO(189, 189, 189, 1),
lineDashArray: [5, 5],
),
series: getCheckedItem(),
),
);
}
}
class SetData{
final String date;
final double? num;
SetData({required this.date,this.num});
}
Thank you.
