Currently working on an application that involves using the fl_charts dependency.
return Container(
padding: EdgeInsets.all(10),
width: double.infinity,
height: 200,
child: LineChart(
LineChartData(
borderData: FlBorderData(show: false),
lineBarsData: [
LineChartBarData(spots: [
FlSpot(0, double.parse(yParam[0])),
FlSpot(1, double.parse(yParam[1])),
FlSpot(2, double.parse(yParam[2])),
FlSpot(3, double.parse(yParam[3])),
FlSpot(4, double.parse(yParam[4])),
FlSpot(5, double.parse(yParam[5])),
FlSpot(6, double.parse(yParam[6])),
FlSpot(7, double.parse(yParam[7])),
FlSpot(8, double.parse(yParam[8])),
FlSpot(9, double.parse(yParam[9])),
FlSpot(10, double.parse(yParam[10])),
FlSpot(11, double.parse(yParam[11])),
FlSpot(12, double.parse(yParam[12])),
],
color: Colors.red,)
]),
),
);
As visible, the x-axis labels for the charts are not displaying correctly. I would like to remove the top x-axis labels and only show the bottom labels at a rotation of 60 degrees.
I have looked at the following reference but it seems these attributes do not exist for it or I cannot find where to insert the correct things.
The chart Data is being streamed in from Firebase database and updates through a streambuilder element.
Thanks a lot!
EDIT:
Thanks to Tray below, I was able to find the answer
return Container(
padding: EdgeInsets.all(10),
width: double.infinity,
height: 200,
child: LineChart(
LineChartData(
borderData: FlBorderData(show: false),
lineBarsData: [
LineChartBarData(spots: [
FlSpot(0, double.parse(yParam[0])),
FlSpot(1, double.parse(yParam[1])),
FlSpot(2, double.parse(yParam[2])),
FlSpot(3, double.parse(yParam[3])),
FlSpot(4, double.parse(yParam[4])),
FlSpot(5, double.parse(yParam[5])),
FlSpot(6, double.parse(yParam[6])),
FlSpot(7, double.parse(yParam[7])),
FlSpot(8, double.parse(yParam[8])),
FlSpot(9, double.parse(yParam[9])),
FlSpot(10, double.parse(yParam[10])),
FlSpot(11, double.parse(yParam[11])),
FlSpot(12, double.parse(yParam[12])),
],
color: Colors.red,
)
],
titlesData: FlTitlesData(
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(showTitles: true, reservedSize: 30),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(showTitles: true, reservedSize: 30),
),
),
),
),
);
Looking at https://github.com/imaNNeoFighT/fl_chart/blob/3f1a6aee638bb89a4a5ff9097737a74e116e4778/example/lib/line_chart/samples/line_chart_sample7.dart#L168 there may be an attribute called "topTitles". You can try setting that to false.
Related
i want to track some stats across days of the month. Using the lineChart from fl_chart library.
the axis values are overflown i want them to look nice and clear.How can i achieve this
AspectRatio(
aspectRatio: 2,
child: LineChart(
LineChartData(
titlesData: FlTitlesData(
rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false,)),
topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: true,interval: 1,reservedSize: 22)),
),
maxX: Config.monthDays[selectedMonthNumber.toString()],
minX: 0,
lineTouchData: LineTouchData(
enabled: false,
),
gridData: FlGridData(
show: false,
),
borderData: FlBorderData(
show: false,
),
lineBarsData: [
LineChartBarData(
spots: snapshot.data!.map((bet) => FlSpot(bet.date!.toDate().day.toDouble(), double.parse(bet.amount!))).toList(),
isCurved: true,
curveSmoothness: 0,
color:
Colors.red ,
barWidth: 2,
),
],
),
),
),
How can i avoid overlapping of the x-axis data and the overlapping tooltip values, i tried reducing the font but that didnt work.For tooltip i wanted to show only maximum value,and other values only when the user clicks on it.
BarChart(
BarChartData(
barTouchData: barTouchData,
titlesData: titlesData,
borderData: borderData,
barGroups: barGroups,
gridData: FlGridData(show: false),
alignment: BarChartAlignment.spaceAround,
minY: 0,
maxY: double.parse((y! + 1000).toString()),
//double.parse(widget.total.toString()),
),
);
}
BarTouchData get barTouchData => BarTouchData(
enabled: true,
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.transparent,
tooltipPadding: EdgeInsets.zero,
tooltipMargin: 5,
getTooltipItem: (
BarChartGroupData group,
int groupIndex,
BarChartRodData rod,
int rodIndex,
) {
return BarTooltipItem(
rod.toY.round().toString(),
const TextStyle(
fontSize: 10,
color: Colors.white,
// fontWeight: FontWeight.bold,
),
);
},
),
);
FlTitlesData get titlesData => FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
// rotateAngle: 90,
showTitles: true,
reservedSize: 30,
// getTitlesWidget: getTitles,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false, reservedSize: 30),
),
topTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
);
FlBorderData get borderData => FlBorderData(
show: true,
border: Border.all(color: Color.fromARGB(255, 207, 182, 168), width: 1),
);
LinearGradient get _barsGradient => const LinearGradient(
colors: [
Colors.lightBlueAccent,
Colors.greenAccent,
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
);
List<BarChartGroupData> get barGroups =>
List.generate(widget.data.length, (index) {
//return Text(text[index].toString());
// for ( var i in widget.data ) Text(i.toString())
return BarChartGroupData(
x: index + 1,
barRods: [
BarChartRodData(
toY: widget.data[index].toDouble(),
gradient: _barsGradient,
)
],
showingTooltipIndicators: [0],
);
});
}
How can I do this with fl_chart?
current view
what i want to do
my codes..
How should I revise my codes?
I am using fl_chart for the first time.
Value - Total Production - 100000 unit
time taken for total production.
return LineChartData(
lineTouchData: LineTouchData(enabled: false),
gridData: FlGridData(show: false),
borderData: FlBorderData(show: false),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 0,
getTextStyles: (context, value) => const TextStyle(color: Color(0xff68737d), fontWeight: FontWeight.bold, fontSize: 16),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return 'ÜRETİM BANDI';
case 2:
return 'GEÇEN SÜRE';
}
return '';
},
margin: 10,
interval: 1,
),
leftTitles: SideTitles(showTitles: false),
topTitles: SideTitles(showTitles: false),
rightTitles: SideTitles(showTitles: false),
),
minX: 0,
maxX: 2,
minY: 0,
maxY: 0,
lineBarsData: [
LineChartBarData(
spots: const [
FlSpot(0, 10),
FlSpot(10, 20),
],
isCurved: true,
colors: [
ColorTween(begin: gradientColors[0], end: gradientColors[1]).lerp(0.2)!,
ColorTween(begin: gradientColors[0], end: gradientColors[1]).lerp(0.2)!,
],
barWidth: 10,
isStrokeCapRound: true,
isStepLineChart: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: false),
),
],
);
thank you,
return LineChart(
LineChartData(
gridData: FlGridData(
show: false,
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 14,
getTitles: (value) {
return _months[value.toInt()];
},
),
leftTitles: SideTitles(
showTitles: true,
getTitles: (value) {
return (value.toInt()).toString();
},
interval: 180/10,
reservedSize: 28,
margin: 12,
),
),
borderData: FlBorderData(show: false),
minX: 0,
minY: 0,
lineBarsData: [
LineChartBarData(spots: [
FlSpot(1, 10),
FlSpot(2, 50),
FlSpot(3, 99),
FlSpot(4, 45),
FlSpot(5, 130),
FlSpot(6, 180),
], isCurved: true,
barWidth: 5,
isStrokeCapRound: true,
belowBarData: BarAreaData(
show: true,
colors: [Colors.yellow, Colors.red],
gradientColorStops: [0, 0.1, 0.2],
gradientFrom: const Offset(1, 1),
// gradientTo: const Offset(0, 1),
),
)
]),
);
Can anyone help me to design this type of line chart with the shadows as on the image
I digged a lot over the internet and I managed to change them for a Pie Chart with "entryTextStyle:" property:
Expanded(
child: charts.PieChart(_wifiData,
animate: true,
animationDuration: Duration(seconds: 1),
behaviors: [
charts.DatumLegend(
outsideJustification:
charts.OutsideJustification.endDrawArea,
horizontalFirst: false,
desiredMaxRows: 2,
cellPadding: EdgeInsets.only(
right: 4.0, bottom: 4.0),
entryTextStyle: charts.TextStyleSpec(
fontSize: 20,
color: charts.ColorUtil.fromDartColor(
kWifiPieChart2)),
)
],
defaultRenderer: charts.ArcRendererConfig(
arcWidth: 100,
arcRendererDecorators: [
charts.ArcLabelDecorator(
labelPosition:
charts.ArcLabelPosition.inside,
insideLabelStyleSpec:
charts.TextStyleSpec(
color: charts
.MaterialPalette.white,
fontSize: 20),
)
])),
),
However I could not find the proper way to do it for Line Chart and Bar Chart. The parts I would like to adjust are the ones highlighted with yellow markers:
Here are my codes:
Bar Chart:
Expanded(
child: charts.BarChart(
barChartData,
animate: true,
barGroupingType: charts.BarGroupingType.grouped,
animationDuration: Duration(seconds: 1),
),
),
For Line Chart :
Expanded(
child: charts.LineChart(lineChartData,
defaultRenderer: charts.LineRendererConfig(
areaOpacity: 0.4,
includeArea: true,
stacked: true),
animate: true,
animationDuration: Duration(seconds: 1),
behaviors: [
charts.ChartTitle('2020 Yılı',
titleStyleSpec: charts.TextStyleSpec(
color: charts.ColorUtil.fromDartColor(
kIbbWifiPieChart2)),
behaviorPosition:
charts.BehaviorPosition.bottom,
titleOutsideJustification: charts
.OutsideJustification.middleDrawArea),
charts.ChartTitle('1000 Kullanıcı',
titleStyleSpec: charts.TextStyleSpec(
color: charts.ColorUtil.fromDartColor(
kIbbWifiPieChart2)),
behaviorPosition:
charts.BehaviorPosition.start,
titleOutsideJustification: charts
.OutsideJustification.middleDrawArea),
charts.ChartTitle(
'Eğitim Durumu',
titleStyleSpec: charts.TextStyleSpec(
color: charts.ColorUtil.fromDartColor(
kIbbWifiPieChart2)),
behaviorPosition:
charts.BehaviorPosition.end,
titleOutsideJustification: charts
.OutsideJustification.middleDrawArea,
)
]),
),
This is how to change the label colors:
It is done with
OrdinalAxisSpec(renderSpec:charts.SmallTickRendererSpec(labelStyle:... )
properties. Here is my code:
Expanded(
child: charts.BarChart(
_barChartData,
animate: true,
barGroupingType: charts.BarGroupingType.grouped,
animationDuration: Duration(seconds: 1),
domainAxis: charts.OrdinalAxisSpec(
renderSpec: charts.SmallTickRendererSpec(
labelStyle: charts.TextStyleSpec(
fontSize: 18,
color: charts.ColorUtil.fromDartColor(
kIbbWifiPieChart2),
),
),
),
primaryMeasureAxis: charts.NumericAxisSpec(
renderSpec: charts.SmallTickRendererSpec(
labelStyle: charts.TextStyleSpec(
color: charts.ColorUtil.fromDartColor(
kIbbWifiPieChart2),
),
),
),
),
),