I am using fl_chart version 0.70.2 (flutter pub add fl_chart) and I get bottom titles outside the X-axis:

I have tried / noticed:

• it seems to be related to the 90° rotation (Transform.rotate(...)).

  My actual text is a datetime ("y-MM-dd hh:mm"), so I really need it rotated.

• the issue seems to be related to reservedSize: 60. If I remove that, the X-position is okay, but then the text overlaps the axis:

Here's the minimal code:

import 'dart:math' as math;

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(home: const AxesDemo());
  }
}

class AxesDemo extends StatelessWidget {
  const AxesDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("FLChart Axis Demo")),
      body: SizedBox(
        height: 300,
        width: double.infinity,
        child: LineChart(
          LineChartData(
            lineBarsData: [
              LineChartBarData(spots: [FlSpot(0, 2), FlSpot(1, 3), FlSpot(2, 5), FlSpot(3, 3)]),
            ],
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  reservedSize: 60,
                  getTitlesWidget: (value, meta) => Transform.rotate(angle: -math.pi / 2, child: Text("oops")),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

What can I change in my code to have nice labels on the axis?

I am using fl_chart version 0.70.2 (flutter pub add fl_chart) and I get bottom titles outside the X-axis:

I have tried / noticed:

• it seems to be related to the 90° rotation (Transform.rotate(...)).

  My actual text is a datetime ("y-MM-dd hh:mm"), so I really need it rotated.

• the issue seems to be related to reservedSize: 60. If I remove that, the X-position is okay, but then the text overlaps the axis:

Here's the minimal code:

import 'dart:math' as math;

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(home: const AxesDemo());
  }
}

class AxesDemo extends StatelessWidget {
  const AxesDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("FLChart Axis Demo")),
      body: SizedBox(
        height: 300,
        width: double.infinity,
        child: LineChart(
          LineChartData(
            lineBarsData: [
              LineChartBarData(spots: [FlSpot(0, 2), FlSpot(1, 3), FlSpot(2, 5), FlSpot(3, 3)]),
            ],
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  reservedSize: 60,
                  getTitlesWidget: (value, meta) => Transform.rotate(angle: -math.pi / 2, child: Text("oops")),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

What can I change in my code to have nice labels on the axis?

• flutter
• dart
• fl-chart

1 Answer 1

This seems to be addressed by fl_chart bug 877.

With a Transform.translate(offset: Offset(x, y), child: ...), you can manually adjust the position.

For the given code, Offset(16,5) seems to work:

titlesData: FlTitlesData(
    bottomTitles: AxisTitles(
        sideTitles: SideTitles(
            showTitles: true,
            reservedSize: 50,
            getTitlesWidget: (value, meta) {
                return Transform.translate(offset: Offset(16, 5), 
                       child: Transform.rotate(angle: -math.pi / 2, child: Text("oops")));
            },
        ),
    ),
),