fl_chart axis title not aligning with the bar when rotateAngle is used
Nobody has claimed this yet.
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
I'm using fl_chart for platting a bar chart in the Flutter application. I have lengthy titles for the x-axis units and the issue I'm seeing is, more the length of the title more the alignment goes for a toss.
In the below chart, x-axis titles with less length aligns properly with the bar where as one with lengthier text seems to move away from the chart.
FlTitlesData get titlesData => FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
getTextStyles: (context, value) => const TextStyle(
color: Color(0xff7589a2),
fontWeight: FontWeight.bold,
fontSize: 14,
),
rotateAngle: 300,
getTitles: (double value) {
switch (value.toInt()) {
case 0:
return 'Test';
case 1:
return 'Unassigned 123434';
case 2:
return 'Alert Saftey 123243';
case 3:
return 'Belfast 12324';
case 4:
return 'Cardiff 243423';
case 5:
return "Domino's Pizza 123234";
case 6:
return 'Glasgow 1232';
case 7:
return 'James Newma 13434';
case 8:
return 'LCC';
case 9:
return 'Liverpool';
case 10:
return 'Testing 123455 454545';
case 11:
return 'Testing 456';
case 12:
return 'Testing 789';
case 13:
return 'Testing 321';
case 14:
return 'Testing 890';
default:
return '';
}
},
),
leftTitles: SideTitles(
showTitles: true,
getTextStyles: (context, value) => const TextStyle(
color: Color(0xff7589a2),
fontWeight: FontWeight.bold,
fontSize: 14),
getTitles: (value) {
if (value == 25) {
return '25';
} else if (value == 50) {
return '50';
} else if (value == 75) {
return '75';
} else {
return '';
}
},
),
topTitles: SideTitles(showTitles: false),
rightTitles: SideTitles(showTitles: false),
);
BarChart(
BarChartData(
titlesData: titlesData,
gridData:
FlGridData(drawHorizontalLine: true, drawVerticalLine: false),
axisTitleData: axisTitleData(context),
borderData: borderData,
barGroups: barGroups,
maxY: 75,// Dynamic
),
)

Flutter version: 2.8.0
fl_chart version: 0.41.0
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the BarChart titlesData configuration, especially SideTitles.rotateAngle and the bottom-axis title layout, and reproduce the issue with the provided long titles and Flutter 2.8.0 example. Done means lengthy rotated x-axis titles remain aligned with their corresponding bars without disrupting shorter titles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100