Skip to content

Line chart y-axis title overlap #2061

@BakaYang

Description

@BakaYang

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

Image

Versions

  • 3.29.2
  • 0.71.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions