1. Home
  2. Forum
  3. Flutter
  4. Two lines appear as a default in SfCatesianChart from a list data source

Two lines appear as a default in SfCatesianChart from a list data source

I have two line graphs but as a default its one line that I have to double click on 1Yr to make it two lines.

Appreciate your help


import 'package:flutter/material.dart';

import 'package:syncfusion_flutter_charts/charts.dart';

class D1 extends StatefulWidget {
@override
_D1 createState() => _D1();
}

class _D1 extends State<D1> with SingleTickerProviderStateMixin {
late TabController _tabController;
late TooltipBehavior _tooltipBehavior;

@override
void initState() {
_tabController = new TabController(length: 1, vsync: this);
_tooltipBehavior = TooltipBehavior(enable: true);
super.initState();
}

late List<bool> isSelected = [false, false, false, true, false, false];
List<ChartData> _dataPoints = _pointsQ1;
List<ChartData> _dataPoints2 = _pointsQ2;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.black,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
),
),
body: Center(
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 80, right: 90),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [],
),
),
SizedBox(
height: 20,
),
AspectRatio(
aspectRatio: 1.5,
child: Container(
height: 300,
width: 300,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18),
),
color: Colors.grey),
child: Padding(
padding: const EdgeInsets.only(
right: 20.0, left: 12.0, bottom: 12),
child: SfCartesianChart(
//legend: Legend(isVisible: true),
tooltipBehavior: _tooltipBehavior,
primaryXAxis: CategoryAxis(
axisLine: AxisLine(width: 2),
majorGridLines: MajorGridLines(width: 0),
),

legend: Legend(
isVisible: true,
// overflowMode: LegendItemOverflowMode.scroll,
textStyle: TextStyle(
color: Colors.black,
),
position: LegendPosition.bottom,
),
series: <ChartSeries>[
LineSeries<ChartData, String>(
isVisibleInLegend: true,
isVisible: true,
legendItemText: 'Target',
color: Color.fromARGB(255, 0, 163, 224), //target
width: 3,
dataSource: _dataPoints,
// Bind the color for all the data points from the data source

xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
isVisible: true,
textStyle:
TextStyle(color: Colors.black, fontSize: 12),
),
markerSettings: MarkerSettings(
isVisible: true,
color: Color.fromARGB(255, 0, 163, 224),
),
enableTooltip: true),
LineSeries<ChartData, String>(
isVisibleInLegend: true,
isVisible: true,
name: "Actual",
color: Color.fromARGB(255, 132, 189, 0),
width: 6,
dataSource: _dataPoints2,
// Bind the color for all the data points from the data source

xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
dataLabelSettings: DataLabelSettings(
isVisible: true,
textStyle:
TextStyle(color: Colors.black, fontSize: 12)),
markerSettings: MarkerSettings(
isVisible: true,
color: Color.fromARGB(255, 132, 189, 0),
),
enableTooltip: true),
],
// primaryXAxis:
//NumericAxis(edgeLabelPlacement: EdgeLabelPlacement.shift),
primaryYAxis: NumericAxis(
labelFormat: '{value}%',
// labelStyle: TextStyle(color: Colors.blue),
axisLine: AxisLine(width: 2),
majorGridLines: MajorGridLines(width: 0),

//numberFormat: NumberFormat.simpleCurrency(decimalDigits: 0)
),
),
),
),
),
ToggleButtons(
color: Colors.black,
borderColor: Colors.black,
fillColor: Color.fromARGB(255, 0, 163, 224), //target
borderWidth: 0,
// minWidth: 90.0,
// minHeight: 30.0,
splashColor: Color.fromARGB(255, 73, 188, 45),
selectedBorderColor: Colors.black,
selectedColor: Colors.black,

// renderBorder: false,
borderRadius: BorderRadius.circular(25),
children: const <Widget>[
Padding(
padding: EdgeInsets.all(3),
child: Text(
' Q1 ',
style: TextStyle(fontSize: 14),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
' Q2 ',
style: TextStyle(fontSize: 14),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
' Q3 ',
style: TextStyle(fontSize: 14),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
' 1Yr ',
style: TextStyle(fontSize: 14),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
' 3Yr ',
style: TextStyle(fontSize: 14),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
' MAX ',
style: TextStyle(fontSize: 14),
),
),
],
onPressed: (int index) {
setState(
() {
// isSelected[i] =
if (index == 0) {
_dataPoints = _pointsQ1;
_dataPoints2 = _pointsQ1_2;
} else if (index == 1) {
_dataPoints = _pointsQ2;
_dataPoints2 = _pointsQ2_2;
} else if (index == 2) {
_dataPoints = _pointsQ3;
_dataPoints2 = _pointsQ3_2;
} else if (index == 3) {
_dataPoints = _points1Yr;
_dataPoints2 = _points1Yr_2;
} else if (index == 4) {
_dataPoints = _points3Yr;
_dataPoints2 = _points3Yr_2;
} else if (index == 5) {
_dataPoints = _pointsMAX;
_dataPoints2 = _pointsMAX_2;
}
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
},
);
},
isSelected: isSelected,
),
const Divider(
color: Colors.black,
),
TabBar(
unselectedLabelColor: Colors.black,

indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
10.0,
),
color: Colors.white,
),
labelColor: Color.fromARGB(255, 0, 0, 0),
//unselectedLabelColor: Colors.grey.shade900,
// labelColor: Color.fromARGB(255, 255, 255, 255),
tabs: const [
Tab(
text: "",
),
],
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),
Expanded(
child: TabBarView(
children: [
Column(
children: [
Table(
border: TableBorder(
horizontalInside: BorderSide(
width: 1,
color: Colors.white,
style: BorderStyle.solid),
),
children: [],
),
],
),
],
controller: _tabController,
),
),
],
),
),
);
}
}

class ChartData {
const ChartData(
this.x,
this.y,
);
final String x;
final double y;
}

const List<ChartData> _pointsQ1 = [
//target
ChartData('Q1', 29),
];
const List<ChartData> _pointsQ1_2 = [
//actual
ChartData('Q1', 31),
];

const List<ChartData> _pointsQ2 = [
ChartData('Q1', 29),
ChartData('Q2', 42),
];
const List<ChartData> _pointsQ2_2 = [
ChartData('Q1', 31),
ChartData('Q2', 43),
];
const List<ChartData> _pointsQ3 = [
ChartData('Q1', 29),
ChartData('Q2', 42),
ChartData('Q3', 54),
];

const List<ChartData> _pointsQ3_2 = [
ChartData('Q1', 31),
ChartData('Q2', 43),
ChartData('Q3', 35),
];

const List<ChartData> _points1Yr = [
ChartData('Q1', 29),
ChartData('Q2', 42),
ChartData('Q3', 54),
ChartData('Q4', 56),
];
const List<ChartData> _points1Yr_2 = [
ChartData('Q1', 31),
ChartData('Q2', 43),
ChartData('Q3', 35),
ChartData('Q4', 25),
];
const List<ChartData> _points3Yr = [
// year 2019
ChartData('Q1-2019', 25),
ChartData('Q2-2019', 23),
ChartData('Q3-2019', 33),
ChartData('Q4-2019', 35),
// year 2020
ChartData('Q1-2020', 33),
ChartData('Q2-2020', 22),
ChartData('Q3-2020', 23),
ChartData('Q4-2020', 25),
// year 2021
ChartData('Q1-2021', 29),
ChartData('Q2-2021', 42),
ChartData('Q3-2021', 54),
ChartData('Q4-2021', 56),
];
const List<ChartData> _points3Yr_2 = [
// year 2019
ChartData('Q1-2019', 24),
ChartData('Q2-2019', 42),
ChartData('Q3-2019', 22),
ChartData('Q4-2019', 21),
// year 2020
ChartData('Q1-2020', 22),
ChartData('Q2-2020', 22),
ChartData('Q3-2020', 33),
ChartData('Q4-2020', 32),
// year 2021
ChartData('Q1-2021', 31),
ChartData('Q2-2021', 43),
ChartData('Q3-2021', 35),
ChartData('Q4-2021', 25),
];
const List<ChartData> _pointsMAX = [
// year 2018
ChartData('Q1-2018', 22),
ChartData('Q2-2018', 27),
ChartData('Q3-2018', 26),
ChartData('Q4-2018', 22),
// year 2019
ChartData('Q1-2019', 25),
ChartData('Q2-2019', 23),
ChartData('Q3-2019', 33),
ChartData('Q4-2019', 35),
// year 2020
ChartData('Q1-2020', 33),
ChartData('Q2-2020', 22),
ChartData('Q3-2020', 23),
ChartData('Q4-2020', 25),
// year 2021
ChartData('Q1-2021', 29),
ChartData('Q2-2021', 42),
ChartData('Q3-2021', 54),
ChartData('Q4-2021', 56),
];
const List<ChartData> _pointsMAX_2 = [
// year 2018
ChartData('Q1-2018', 23),
ChartData('Q2-2018', 22),
ChartData('Q3-2018', 25),
ChartData('Q4-2018', 21),
// year 2019
ChartData('Q1-2019', 24),
ChartData('Q2-2019', 42),
ChartData('Q3-2019', 22),
ChartData('Q4-2019', 21),
// year 2020
ChartData('Q1-2020', 22),
ChartData('Q2-2020', 22),
ChartData('Q3-2020', 33),
ChartData('Q4-2020', 32),
// year 2021
ChartData('Q1-2021', 31),
ChartData('Q2-2021', 43),
ChartData('Q3-2021', 35),
ChartData('Q4-2021', 25),
];



1 Reply
SK Sriram Kiran Senthilkumar Syncfusion Team September 6, 2022 09:19 AM UTC

Hi Yara,


Greetings from Syncfusion. We have checked your query and on analyzing your sample, we found that you have set the Q1 and Q2 chart data by default for the _dataPoint and _dataPoint2 chart data collections and due to this, the chart renders the Q1 and Q2 chart data on initial rendering instead of your expected 1-year chart data.

We have modified your sample by setting the 1-year’s chart data by default in the initState method of state class to achieve your requirement and attached the sample below for reference. Please check and get back to us if you require further assistance.


Regards,
Sriram Kiran


Attachment: f177281_53ba3518.zip

Loader.
Up arrow icon