dublicated x-axis titles

[Tobbyte]

first: thanks for your awesome work! Much appreciated!

Came across a strange behavior when showing close minX and maxX values: at some point the calculated interval goes < 1 and more titles than datapoints get shown.

for

LineChartData(
   minX: 0,
   maxX: 7,

all good - one title per data point (meta.appliedInterval is 1) :

but

LineChartData(
   minX: 0,
   maxX: 6,

more titles than datapoints (meta.appliedInterval is 0.5)?

Versions Flutter: 3.19.6 fl_chart: ^0.68.0

min example:

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double intervalDump = 0;

  double sliderVal = 4;

  List<FlSpot> spots = [
    const FlSpot(0, 1),
    const FlSpot(1, 2),
    const FlSpot(2, -1),
    const FlSpot(3, -2),
    const FlSpot(4, 1),
    const FlSpot(5, -1),
    const FlSpot(6, 2),
    const FlSpot(7, 1),
    const FlSpot(8, 1),
    const FlSpot(9, 2),
    const FlSpot(10, -1),
    const FlSpot(11, -2),
    const FlSpot(12, 1),
    const FlSpot(13, -1),
    const FlSpot(14, 2),
    const FlSpot(15, 1),
  ];

  @override
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Center(child: Text("interval:\n $intervalDump")),
            AspectRatio(
              aspectRatio: 1 / 1,
              child: LineChart(
                LineChartData(
                  lineTouchData: const LineTouchData(enabled: false), // btw: needed for showingIndicators?!
                  clipData: const FlClipData.all(),
                  minX: 0,
                  maxX: sliderVal,
                  minY: -3,
                  maxY: 3,
                  titlesData: FlTitlesData(
                    bottomTitles: AxisTitles(
                        sideTitles: SideTitles(
                      showTitles: true,
                      getTitlesWidget: ((value, meta) {
                        intervalDump = meta.appliedInterval;
                        return SideTitleWidget(
                          axisSide: meta.axisSide,
                          space: 0,
                          angle: -12,
                          child: Text(value.toString()),
                        );
                      }),
                    )),
                  ),
                  lineBarsData: [
                    LineChartBarData(
                      showingIndicators: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
                      dotData: FlDotData(
                        getDotPainter: (dot, a, data, i) => FlDotCirclePainter(
                          radius: 1,
                        ),
                        show: true,
                      ),
                      spots: spots,
                    ),
                  ],
                ),
              ),
            ),
            Slider(
                value: sliderVal,
                min: 1,
                max: spots.length - 1,
                onChanged: (newVal) {
                  setState(() {
                    sliderVal = newVal;
                  });
                })
          ],
        ),
      ),
    );
  }
}

[helgasoft]

could be accomplished with an additional (invisible) bar series - Demo 📌 please close issue if problem solved.

[akopanskiy]

Thanks, it works. But the catch is that there are four types of bars, for instance here https://echarts.apache.org/examples/en/editor.html?c=bar-label-rotation. If you change the number of bars, then they are not placed evenly between the marks after that.