Labels overlapping, what's the replacement for checkToShowTitle

[Sesa1988]

Hi,

I was before on version: 0.36.4 and used checkToShowTitle to hide some labels:

checkToShowTitle:(minValue, maxValue, sideTitles, appliedInterval, value) {
            if (minValue == value) return false;
            if (maxValue == value) return false;
            return true;
},

I updated to the latest version and tried to replace it with in getTitlesWidget:

 if (meta.min == value) return Container();
 if (meta.max == value) return Container(); 

but this does not hide the same as before and labels are overlapping.

Im not sure if something else could be also an issue but I can't find a solution.

Its not working because its not the max value but how it was working before?

Before the update it was inconsistent like sometimes only 3 values would be shown but it never overlapped at least.
I want to have one label at the top, one at the bottom and 2 in-between but can't make it work.

Thats my full configuration:

class ChartConfigHelper {
  static LineChartData getChartConfig(
    List<AssetHistory> points,
    MarketHistoryTimeRange range,
    Currency selectedCurrency,
    Color primaryColor,
    Color dividerColor,
    Color captionColor,
    Color scaffoldColor,
  ) {
    var largestPrice = points.map((e) => e.priceUsd).toList().reduce(max);
    var smallestPrice = points.map((e) => e.priceUsd).toList().reduce(min);
    var difference = largestPrice - smallestPrice;
    var interval = difference / 3;

    return LineChartData(
      lineTouchData: LineTouchData(
        getTouchLineStart: (barData, index) => -double.infinity,
        getTouchLineEnd: (barData, index) => double.infinity,
        touchTooltipData: LineTouchTooltipData(
          tooltipBgColor: PlatformHelper.isDesktop()
              ? primaryColor.withOpacity(0.8)
              : primaryColor,
          fitInsideHorizontally: true,
          tooltipMargin: PlatformHelper.isDesktop() ? 20 : 0,
          showOnTopOfTheChartBoxArea: PlatformHelper.isDesktop() ? false : true,
          getTooltipItems: (touchedSpots) {
            return touchedSpots
                .map((e) => LineTooltipItem(
                      '${MarketFormat.getMarketChartTooltipPriceString(e.y, selectedCurrency.currency, true)} \n\n ${DateFormat.yMd(Platform.localeName).format(points[e.spotIndex].time.toLocal())} \n ${DateFormat.jm(Platform.localeName).format(points[e.spotIndex].time.toLocal())}',
                      const TextStyle(color: Colors.white, fontSize: 14),
                    ))
                .toList();
          },
        ),
        touchCallback: (_, __) {},
        handleBuiltInTouches: true,
        getTouchedSpotIndicator: (barData, spotIndexes) {
          return _touchIndicator(
              barData, spotIndexes, primaryColor, scaffoldColor);
        },
      ),
      gridData: FlGridData(
        show: true,
        horizontalInterval: interval == 0 ? 1 : interval,
        verticalInterval: points.length / 4,
        drawVerticalLine: true,
        getDrawingHorizontalLine: (value) {
          return FlLine(color: dividerColor, strokeWidth: 1.0);
        },
        getDrawingVerticalLine: (value) {
          return FlLine(color: dividerColor, strokeWidth: 1.0);
        },
      ),
      titlesData: FlTitlesData(
        topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
        bottomTitles: AxisTitles(
            sideTitles: SideTitles(
          showTitles: true,
          reservedSize: 10,
          interval: points.length / 4,
          // checkToShowTitle:
          //     (minValue, maxValue, sideTitles, appliedInterval, value) {
          //   if (minValue == value) return false;
          //   if (maxValue == value) return false;
          //   return true;
          // },
          getTitlesWidget: (value, meta) {
            if (meta.min == value) return Container();
            if (meta.max == value) return Container();

            var index = value.toInt();
            var result = '';
            if (range == MarketHistoryTimeRange.twentyFourHours) {
              try {
                result = DateFormat.jm(Platform.localeName).format(
                  points[index].time.toLocal(),
                );
              } catch (e) {
                result = '';
              }
            } else {
              try {
                result = DateFormat.Md(Platform.localeName).format(
                  points[index].time.toLocal(),
                );
              } catch (e) {
                result = '';
              }
            }
            return Text(
              result,
              style: TextStyle(
                color: captionColor,
                fontWeight: FontWeight.normal,
                fontSize: 9,
              ),
            );
          },
        )),
        leftTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: false,
            reservedSize: 26,
            getTitlesWidget: (value, meta) => Text(
              value.toString(),
              style: TextStyle(
                color: captionColor,
                fontWeight: FontWeight.bold,
                fontSize: 9,
              ),
            ),
            interval: interval == 0 ? 1 : interval,
          ),
        ),
        rightTitles: AxisTitles(
            sideTitles: SideTitles(
          showTitles: true,
          getTitlesWidget: (value, meta) => Text(
            _legendPriceFormatter(value).format(value),
            style: TextStyle(
              color: captionColor,
              fontWeight: FontWeight.normal,
              fontSize: 9,
            ),
          ),
          interval: interval == 0 ? 1 : interval,
          reservedSize: 28,
        )),
      ),
      // minY: smallestPrice * 0.99,
      // maxY: largestPrice * 1.1,
      borderData: FlBorderData(
        show: true,
        border: const Border(
          bottom: BorderSide(
            /* color: Colors.grey[200], */
            color: Colors.transparent,
          ),
          left: BorderSide(
            color: Colors.transparent,
          ),
          right: BorderSide(
            color: Colors.transparent,
          ),
          top: BorderSide(
            color: Colors.transparent,
          ),
        ),
      ),
      lineBarsData: ChartLinesHelper.getLines(points, selectedCurrency),
    );
  }

  static List<TouchedSpotIndicatorData> _touchIndicator(
    LineChartBarData barData,
    List<int> indicators,
    Color primaryColor,
    Color scaffoldColor,
  ) {
    return indicators.map((int index) {
      final flLine = FlLine(
        color: primaryColor,
        strokeWidth: 1.0,
        dashArray: [1, 2],
      );

      final dotData = FlDotData(
          getDotPainter: (spot, percent, bar, index) => FlDotCirclePainter(
                radius: 4.0,
                color: primaryColor,
                strokeColor: scaffoldColor,
                strokeWidth: 1,
              ));

      return TouchedSpotIndicatorData(flLine, dotData);
    }).toList();
  }

  static NumberFormat _legendPriceFormatter(double value) {
    var formatter = NumberFormat.compactCurrency(
      locale: 'en-us',
      decimalDigits: 2,
      symbol: '',
    );

    return formatter;
  }
} 

[imaNNeo]

We changed it in the 0.50.0, now we have getTitlesWidget which you can return a simple Container() when you don't want to show the title.
You can read the migration guide here

[Sesa1988]

We changed it in the 0.50.0, now we have getTitlesWidget which you can return a simple Container() when you don't want to show the title.
You can read the migration guide here

Hi, thx for your response.

Yes I saw that and changed my code already but I cant make it work the way I want. I want to add one label at the top, one at the bottom and two between with the same range between. Is that currently possible?

I was able to hide a label with some calculations and ranges like this but could not implement it the way described above.

[imaNNeo]

You need to do some custom calculations to achieve that.

[Sesa1988]

You need to do some custom calculations to achieve that.

Im not sure how the calculations should look like.
This would be a nice option since it looks like its more complicated.

[encikpulasan]

Hi, I happen to have a similar problem when migrating from v2.3.1 to v3.0.2 where we calculate the interval by
(maxY-minY)/number_of_interval_desired.

v2.3.1

v3.0.2

May i know why the change is being implemented? Thanks.

[imaNNeo]

@encikpulasan
Because we changed rendering titles from only text to any widget. That's why that property is removed. You can pass an empty Container() to hide each text that you want.

[encikpulasan]

@imaNNeo I found that the grid generated are not evenly spaced, the first line after minimum value is less than the interval value. I'm having issue with this since i can't set the label and grid line correctly as i wanted.

You can see the difference from the images i shared above. Thanks.

[ChrisElliotUK]

@encikpulasan how did you resolve this?

[ChrisElliotUK]

Ok I have found this issues lessens when I use values greater than 1, my values were very small but multiplying them by 1000 helped a lot

[imaNNeo]

It seems we have a duplicate issue. So I will keep the older one which is #906