Axis title size, Axis title intervals

[AlwinFassbender]

Hi everyone, below you can see the screenshot of a graph I created. It looks beautiful and I love using this package so far!

Two questions regarding the use of this package:

1. I want the outermost axis titles to disappear (21 & 3 on the y-Axis, Mar & Dec on the x-Axis). How can I achieve that?
2. The space reserved for the axis titles seems to be fixed. If I do not set axisNameSize: 60 and reservedSize: 60, the numbers appear in two rows. But I want to make the length of the numbers variable, even 5-digit numbers might be used on the axis titles. Do I have to calculate the size the Text widgets need myself, or is there a built-in solution for this?

Here is the code I used to create this chart.

final spots = [
  FlSpot(DateTime(2023, 11, 20).millisecondsSinceEpoch.toDouble(), 20),
  FlSpot(DateTime(2023, 10, 26).millisecondsSinceEpoch.toDouble(), 18),
  FlSpot(DateTime(2023, 9, 15).millisecondsSinceEpoch.toDouble(), 15),
  FlSpot(DateTime(2023, 8, 30).millisecondsSinceEpoch.toDouble(), 13),
  FlSpot(DateTime(2023, 8, 30).millisecondsSinceEpoch.toDouble(), 13),
  FlSpot(DateTime(2023, 8, 10).millisecondsSinceEpoch.toDouble(), 12),
  FlSpot(DateTime(2023, 8).millisecondsSinceEpoch.toDouble(), 11),
  FlSpot(DateTime(2023, 7, 25).millisecondsSinceEpoch.toDouble(), 12),
  FlSpot(DateTime(2023, 7, 11).millisecondsSinceEpoch.toDouble(), 11),
  FlSpot(DateTime(2023, 3, 25).millisecondsSinceEpoch.toDouble(), 5),
];

final maxY = spots.map((spot) => spot.y).reduce(max);
final minY = spots.map((spot) => spot.y).reduce(min);

final maxX = spots.map((spot) => spot.x).reduce(max).toInt();
final minX = spots.map((spot) => spot.x).reduce(min).toInt();
final maxDate = DateTime.fromMillisecondsSinceEpoch(maxX);
final minDate = DateTime.fromMillisecondsSinceEpoch(minX);

DateFormat dateFormat;
if (minDate.daysUntil(maxDate) < 14) {
  dateFormat = DateFormat.E();
} else if (minDate.daysUntil(maxDate) < 60) {
  dateFormat = DateFormat.MMMd();
} else if (minDate.daysUntil(maxDate) < 730) {
  dateFormat = DateFormat.MMM();
} else {
  dateFormat = DateFormat.yMMM();
}

return Container(
  decoration: BoxDecoration(color: // color, borderRadius: // borderRadius),
  child: AspectRatio(
    aspectRatio: 1.7,
    child: Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 6,
        horizontal: 10,
      ),
      child: LineChart(
        LineChartData(
          // 5% padding right of the x axis
          maxX: maxX + ((maxX - minX) / 20),
          // 5% padding left of the x axis
          minX: minX - ((maxX - minX) / 20),
          // 10% padding above the y axis
          maxY: maxY + ((maxY - minY) / 10),
          // 10% padding below the y axis
          minY: minY - ((maxY - minY) / 10),
          gridData: FlGridData(
            getDrawingHorizontalLine: (value) => FlLine(color: theme.secondaryTextColor, strokeWidth: 1),
            drawVerticalLine: false,
          ),
          titlesData: FlTitlesData(
            // Don't show titles right
            rightTitles: const AxisTitles(),
            // Don't show titles on top
            topTitles: const AxisTitles(),
            // Target title
            leftTitles: AxisTitles(
              // unfortunate that this needs to be hardcoded
              axisNameSize: 60,
              sideTitles: SideTitles(
                reservedSize: 60,
                getTitlesWidget: (value, titleMeta) => Padding(
                  padding: const EdgeInsets.only(right: 10),
                  child: Text("${value.toInt()}", maxLines: 1, style: theme.bodyTextSecondary),
                ),
                showTitles: true,
              ),
            ),
            // Date title
            bottomTitles: AxisTitles(
              // TODO: make dependent on text size factor
              axisNameSize: 24,
              sideTitles: SideTitles(
                reservedSize: 24,
                getTitlesWidget: (value, meta) => Padding(
                  padding: const EdgeInsets.only(top: 10),
                  child: Text(
                    dateFormat.format(DateTime.fromMillisecondsSinceEpoch(value.toInt())),
                    style: theme.bodyTextSecondary,
                  ),
                ),
                showTitles: true,
              ),
            ),
          ),
          borderData: FlBorderData(show: false),
          lineBarsData: [
            LineChartBarData(
              color: Colors.orange,
              isCurved: true,
              dotData: FlDotData(
                // show: false,
                getDotPainter: (p0, p1, p2, p3) {
                  return FlDotCirclePainter(
                    color: Colors.orange,
                    radius: 4.0,
                    strokeWidth: 0,
                    strokeColor: Colors.orange,
                  );
                },
              ),
              spots: spots,
            ),
          ],
        ),
      ),
    ),
  ),
);

Thanks for the package and any help!

[imaNNeo]

I couldn't run your code (DateFormat and it's daysUntil function are unknown). Please give me a main.dart file content to just run the app.

[AlwinFassbender]

Hi, you can find the main.dart file here: https://github.com/AlwinFassbender/fl_chart_test/blob/main/lib/main.dart

There is a solution in the code to both questions, you have to uncomment lines 88, 90, 99, 101 and 103 for that. I would appreciate your feedback on the implementation!

I still think it is unfortunate that you have to specify the size of the title widgets, and I don't exactly get why you can specify it twice (in reservedSize and axisNameSize). With widgets other than Text as titles you would need to use a LayoutBuilder I guess. Is there no way this package could be changed to infer the size of the titles widgets itself?