Line chart y-axis title overlap
Nobody has claimed this yet.
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
**Describe the bug**
Line chart y-axis title overlap
**To Reproduce**
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: true,
),
home: const ChartPage(),
);
}
}
class ChartPage extends StatefulWidget {
const ChartPage({super.key});
@override
State createState() => _ChartPageState();
}
class _ChartPageState extends State {
@override
Widget build(BuildContext context) {
final List spots = [PointModel('a', -2),PointModel('b', -203)];
return Scaffold(
body: Center(
child: SizedBox(
height: 300,
width: 300,
child: LineChart(
LineChartData(
gridData: FlGridData(
show: true,
drawVerticalLine: false,
drawHorizontalLine: true,
),
titlesData: FlTitlesData(
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (value, meta) {
return Padding(
padding: const EdgeInsets.only(right: 8),
child: Text(
value.toString(),
textAlign: TextAlign.right,
),
);
},
reservedSize: 50,
),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
interval: 1,
getTitlesWidget: (value, meta) {
return Padding(
padding: const EdgeInsets.only(top: 5),
child: Text(
spots[value.toInt()].x,
textAlign: TextAlign.left,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
);
},
reservedSize: 45,
),
),
rightTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false)),
topTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false)),
),
borderData: FlBorderData(
show: true,
border: Border(
bottom: BorderSide(
color: Colors.black),
),
),
lineBarsData: [
LineChartBarData(
spots: List.generate(spots.length,
(i) => FlSpot(i.toDouble(), spots[i].y )),
isCurved: true,
color: Color(0xFF0388D2),
barWidth: 1,
isStrokeCapRound: true,
),
],
),
),
),
),
);
}
}
class PointModel {
final String x;
final double y;
const PointModel(this.x,this.y);
}
**Screenshots**
**Versions**
- 3.29.2
- 0.71.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 by running the supplied Flutter reproduction with fl_chart 0.71.0 and inspect the line-chart title and axis layout code. Trace how the left-axis labels are positioned within the 300×300 chart. Done means the y-axis title or labels no longer overlap while the chart and other configured titles still render correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100