Fl_chart: Left title should have `checkToShowTitle` similar as it's for Grid. Sometimes interval does not make sense or miss the maxY value.

[snj07]

Is your feature request relasted to a problem? Please describe.
I am trying to generate a line graph and in my case when the minY is 2000 and maxY is 3000 and interval is (3000-2000)/3 = 333.333333335 as there are two additional grids and in this case it will miss the title for 3000. So in this screenshot 3K is missing here.

Describe the solution you'd like
There should be a parameter similar to checkToShowHorizontalLine for grid to check if it needs to show left title and it should check till maxY.

 leftTitles: SideTitles(
          interval: _fetchLeftTileInterval(), // instead of this
          /// THIS SHOULD BE THERE
           checkToShowLeftTitle: (value) { 
                return _isLeftTitleVisible(value);
          },
          showTitles: true,
          textStyle: TextStyle(
            color: const Color(0xffffffff),
            fontWeight: FontWeight.bold,
            fontSize: 14,
          ),
          getTitles: (value) {
            print(value);
            return NumberFormat.compactCurrency(symbol: '')
                .format(value)
                .toString();
          },
          margin: 8,
          reservedSize: 30,
  ),

Describe alternatives you've considered
I could not find any alternative. Please suggest if there is any workaround

Code to reproduce

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

class LineChartSample1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => LineChartSample1State();
}

class LineChartSample1State extends State<LineChartSample1> {
  double customMax = 3000;
  double minY = 2000;
  double maxY = 2002;

  List<double> gridList;

  @override
  void initState() {
    super.initState();
    gridList = _createGridVisibleList();
  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1.4,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(18)),
          gradient: LinearGradient(
            colors: const [
              Color(0xff2c274c),
              Color(0xff46426c),
            ],
            begin: Alignment.bottomCenter,
            end: Alignment.topCenter,
          ),
        ),
        child: Stack(
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                const SizedBox(
                  height: 37,
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(right: 16.0, left: 6.0),
                    child: createLineChart1(),
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  LineChart createLineChart1() {
    return LineChart(createLineChartData());
  }

  LineChartData createLineChartData() {
    return LineChartData(
      maxY: customMax,
      lineTouchData: LineTouchData(
        touchTooltipData: LineTouchTooltipData(
          tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
        ),
        touchCallback: (LineTouchResponse touchResponse) {
          print(touchResponse);
        },
        handleBuiltInTouches: true,
      ),
      gridData: FlGridData(
        show: true,
        drawHorizontalLine: true,
        checkToShowHorizontalLine: (value) {
          return _isGridVisible(value);
        },
        getDrawingHorizontalLine: (value) {
          return FlLine(color: const Color(0xfffffff3), strokeWidth: 1.0);
        },
      ),
      axisTitleData: FlAxisTitleData(
          leftTitle: AxisTitle(showTitle: true, titleText: 'Value', margin: 4),
          bottomTitle: AxisTitle(
              showTitle: true,
              margin: 0,
              titleText: 'Week',
//              textStyle: dateTextStyle,
              textAlign: TextAlign.right)),
      titlesData: FlTitlesData(
        bottomTitles: SideTitles(
          showTitles: true,
          reservedSize: 24,
          textStyle: TextStyle(
            color: const Color(0xffffffff),
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
          margin: 10,
        ),
        leftTitles: SideTitles(
          interval: _fetchLeftTileInterval(),
          showTitles: true,
          textStyle: TextStyle(
            color: const Color(0xffffffff),
            fontWeight: FontWeight.bold,
            fontSize: 14,
          ),
          getTitles: (value) {
            print(value);
            return NumberFormat.compactCurrency(symbol: '')
                .format(value)
                .toString();
          },
          margin: 8,
          reservedSize: 30,
        ),
      ),
      borderData: FlBorderData(
        show: true,
        border: Border(
          bottom: BorderSide(
            color: const Color(0xff4e4965),
            width: 1,
          ),
          top: BorderSide(
            color: const Color(0xffffffff),
            width: 1,
          ),
          right: BorderSide(
            color: Colors.transparent,
          ),
          left: BorderSide(
            color: Colors.transparent,
          ),
        ),
      ),
      lineBarsData: linesBarData1(),
    );
  }

  List<double> _createGridVisibleList() {
    var interval = ((customMax - minY) / 3).floorToDouble();
//
    if (interval <= 1.0) {
      interval = 1.0;
    } else if (interval <= 2.0 || customMax <= 10) {
      interval = 2.0;
    }
    final List<double> intervalList = [];
    double visibleGrid = minY + interval;

    while (visibleGrid < customMax - 1) {
      intervalList.add(visibleGrid);
      visibleGrid += interval;
    }
    return intervalList;
  }

  bool _isGridVisible(double value) {
    if (value.toInt() == 0) {
      return false;
    }
    return gridList.contains(value);
  }

  double _fetchLeftTileInterval() {
    if (maxY.toInt() == 0) {
      return 1.0;
    }
    if (maxY == minY) {
      return maxY + 1.0;
    }
    if (maxY.toInt() >= 1 && maxY.toInt() <= 10) {
      return 2.0;
    }
    final interval = ((customMax - minY) / 3).toDouble();
    return interval < 1.0 ? 1.0 : interval;
  }

  List<LineChartBarData> linesBarData1() {
    LineChartBarData lineChartBarData1 = LineChartBarData(
      spots: [
        FlSpot(7, 2000),
        FlSpot(8, 2002),
        FlSpot(9, 2002),
        FlSpot(10, 2000),
      ],
      isCurved: false,
      colors: [
        Colors.orange,
      ],
      barWidth: 2,
      isStrokeCapRound: true,
      dotData: FlDotData(
        show: false,
      ),
      belowBarData: BarAreaData(show: false, colors: [
        Color(0x00aa4cfc),
      ]),
    );

    return [
      lineChartBarData1,
    ];
  }
}

[imaNNeoFighT]

It will be in the next version,
stay tuned!

[imaNNeoFighT]

Hi dude,
We've just released 0.10.0 version,
checkToShowTitle property is added in the SideTitles, for checking show or not show titles in the provided value.

Check LineChartSample 8

Thanks for your patience!

[snj07]

Thank you :)

[imaNNeoFighT]

Is it enough for your use-case?

[snj07]

Yes. It seems like it has more than the expected parameters. I'll modify the implementation soon for my project. Thanks for the feature.

[imaNNeoFighT]

You're welcome!

[snj07]

I checked with the above example and it's working perfectly. But I have one doubt, do you think minValue, maxValue, sideTitles, and appliedInterval parameters are useful for determining if the title should be visible for the library users as they are just the fixed values?

[imaNNeoFighT]

We had a restriction for setting a default callback,
we didn't have access to them easily, then we passed them.
And I think it doesn't make any problem or confusion.