How to rotate text in flutter charts? - flutter

Question

I am trying to design a chart in a flutter app that displays data graphed against time or day (depending on a button press), however, I am running into an issue where the graph label text runs into each other.
I was wondering if there is a way to rotate text in the fl_chart object LineChartData to show the date or time at an angle or vertically rotated?
My code looks like this so far and the output of the graph looks like this:
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:sembast/timestamp.dart';
import '../models/outcome.dart';
dynamic grapher() {
return Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 1.70,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18),
),
color: Colors.black),
child: Padding(
padding: const EdgeInsets.only(
right: 18.0, left: 12.0, top: 24, bottom: 12),
child: LineChart(
mainData(),
),
),
),
),
],
);
}
LineChartData mainData() {
return LineChartData(
...
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
textStyle: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
getTitles: (value) {
//return value.round().toString();
for (int i = 0; i <= outcomeList.length; i++) {
return outcomeList[i].recordedTime.toString();
}
},
margin: 8,
),
...
),
...
}
List<FlSpot> datapoints = [
FlSpot(0, outcomeList[0].value),
FlSpot(2.6, outcomeList[1].value),
FlSpot(4.9, outcomeList[2].value),
FlSpot(6.8, outcomeList[3].value),
FlSpot(8, outcomeList[4].value),
FlSpot(10, outcomeList[5].value),
];
List<Outcome> outcomeList = [
Outcome(name: 'mood', recordedTime: Timestamp.now(), value: 5.6),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 1))),
value: 6.7),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 2))),
value: 5.5),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 3))),
value: 6.2),
Outcome(
name: 'mood',
recordedTime:
Timestamp.fromDateTime(DateTime.now().add(new Duration(hours: 4))),
value: 7.7),
Outcome(
name: 'mood',
recordedTime: Timestamp.fromDateTime(
DateTime.now().add(new Duration(hours: 5, minutes: 26))),
value: 6.4),
];

Answer 1

You can use SideTitles's attribute rotateAngle
full code is official demo LineChartSample7 use rotateAngle
You can see red rectangle of working demo below
code snippet
SideTitles(
rotateAngle: 90,
showTitles: true,
working demo
full code
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class LineChartSample7 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
width: 300,
height: 140,
child: LineChart(
LineChartData(
lineTouchData: LineTouchData(enabled: false),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 4),
FlSpot(1, 3.5),
FlSpot(2, 4.5),
FlSpot(3, 1),
FlSpot(4, 4),
FlSpot(5, 6),
FlSpot(6, 6.5),
FlSpot(7, 6),
FlSpot(8, 4),
FlSpot(9, 6),
FlSpot(10, 6),
FlSpot(11, 7),
],
isCurved: true,
barWidth: 2,
colors: [
Colors.green,
],
dotData: FlDotData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(0, 0),
FlSpot(1, 3),
FlSpot(2, 4),
FlSpot(3, 5),
FlSpot(4, 8),
FlSpot(5, 3),
FlSpot(6, 5),
FlSpot(7, 8),
FlSpot(8, 4),
FlSpot(9, 7),
FlSpot(10, 7),
FlSpot(11, 8),
],
isCurved: true,
barWidth: 2,
colors: [
Colors.black,
],
dotData: FlDotData(
show: false,
),
),
LineChartBarData(
spots: [
FlSpot(0, 7),
FlSpot(1, 3),
FlSpot(2, 4),
FlSpot(3, 0),
FlSpot(4, 3),
FlSpot(5, 4),
FlSpot(6, 5),
FlSpot(7, 3),
FlSpot(8, 2),
FlSpot(9, 4),
FlSpot(10, 1),
FlSpot(11, 3),
],
isCurved: false,
barWidth: 2,
colors: [
Colors.red,
],
dotData: FlDotData(
show: false,
),
),
],
betweenBarsData: [
BetweenBarsData(
fromIndex: 0,
toIndex: 2,
colors: [Colors.red.withOpacity(0.3)],
)
],
minY: 0,
titlesData: FlTitlesData(
bottomTitles: SideTitles(
rotateAngle: 90,
showTitles: true,
textStyle:
TextStyle(fontSize: 10, color: Colors.purple, fontWeight: FontWeight.bold),
getTitles: (value) {
switch (value.toInt()) {
case 0:
return 'Jan';
case 1:
return 'Feb';
case 2:
return 'Mar';
case 3:
return 'Apr';
case 4:
return 'May';
case 5:
return 'Jun';
case 6:
return 'Jul';
case 7:
return 'Aug';
case 8:
return 'Sep';
case 9:
return 'Oct';
case 10:
return 'Nov';
case 11:
return 'Dec';
default:
return '';
}
}),
leftTitles: SideTitles(
showTitles: true,
getTitles: (value) {
return '\$ ${value + 0.5}';
},
),
),
gridData: FlGridData(
show: true,
checkToShowHorizontalLine: (double value) {
return value == 1 || value == 6 || value == 4 || value == 5;
},
),
),
),
);
}
}