Combine several bar data in linechart into one single tooltip

[herna]

A linechart with several bar charts is used to compare different values, so there should be a way to unify all those values into one single tooltip.

Consider the following example.

I have two data series over the same period of time. When you hover your mouse you should be able to show one single tooltip with the date (the date is the same for both) and the value of each bar chart.

This is a screenshot of the original library I am using in Javascript:

But I cannot find a way to do the same here and I get 2 different tooltips with the date field duplicated:

Another issue since both tooltips are independent is that the one with higher value is placed on top and the other at the bottom, so when you hover the mouse along the chart, this is misleading because sometimes one of the values is placed on top and others at the bottom:

[herna]

Ok let me show you how I finally overcame this:

Instead of using barSpot in LineTouchData.getTooltipItems() to print values, I pass the original list of records to lineTouchData() and use barSpot.index to grab each of the values from the original list. Also I just return one single LineTooltipItem with all the information combine of the different group of values and return const LineTooltipItem('', TextStyle(fontSize: 0)) for the rest.

GenericPeriodicalElement? _readSpot(
      LineChartType lineChartType, LoggerState state, int index) {
    List<GenericPeriodicalElement>? elements;
    switch (lineChartType) {
      case LineChartType.ph:
        elements = state.initialLogsDTO.completeLoggerSearchData
            .waterPeriodicalData?.phData;
        break;
      case LineChartType.chlorine:
        elements = state.initialLogsDTO.completeLoggerSearchData
            .waterPeriodicalData?.chlorineData;
        break;
      case LineChartType.waterTemperature:
        elements = state.initialLogsDTO.completeLoggerSearchData
            .waterPeriodicalData?.temperatureData;
        break;
    }

    if (elements != null && index < elements.length) {
      return elements[index];
    }

    return null;
  }

  GenericPeriodicalElement? _programmedSpot(
      LineChartType lineChartType, LoggerState state, int index) {
    List<GenericPeriodicalElement>? elements;
    switch (lineChartType) {
      case LineChartType.ph:
        elements = state.initialLogsDTO.completeLoggerSearchData
            .waterPeriodicalData?.phDataProgrammed;
        break;
      case LineChartType.chlorine:
        elements = state.initialLogsDTO.completeLoggerSearchData
            .waterPeriodicalData?.chlorineDataProgrammed;
        break;
      case LineChartType.waterTemperature:
        break;
    }

    if (elements != null && index < elements.length) {
      return elements[index];
    }

    return null;
  }

  LineTouchData lineTouchData(
      LineChartType lineChartType, LoggerState state, int? pump2Type) {
    return LineTouchData(
      handleBuiltInTouches: true,
      touchTooltipData: LineTouchTooltipData(
        maxContentWidth: 500,
        fitInsideHorizontally: true,
        fitInsideVertically: true,
        getTooltipColor: (touchedSpot) => Colors.white.withOpacity(0.8),
        tooltipBorder: const BorderSide(color: Colors.black),
        getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
          return touchedBarSpots.map((barSpot) {
            GenericPeriodicalElement? readSpot =
                _readSpot(lineChartType, state, barSpot.spotIndex);
            GenericPeriodicalElement? programmedSpot =
                _programmedSpot(lineChartType, state, barSpot.spotIndex);

            if (barSpot.barIndex != 0 || readSpot == null) {
              return const LineTooltipItem('', TextStyle(fontSize: 0));
            }

            DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(
                readSpot.x.millisecondsSinceEpoch);
            DateFormat dateFormat = DateFormat(dateFormat_ddMMyyyyHHmmss_slash);

            String valueText;
            switch (lineChartType) {
              case LineChartType.ph:
                valueText = 'pH ';
              case LineChartType.chlorine:
                if (pump2Type == waterPumpReadingTypeMv) {
                  valueText = 'mV ';
                } else {
                  valueText = 'PPM ';
                }
              case LineChartType.waterTemperature:
                valueText = '°C ';
            }

            String dateTxt = '${dateFormat.format(dateTime)} \n';

            int numberOfDecimals = (lineChartType == LineChartType.chlorine &&
                    pump2Type == waterPumpReadingTypeMv)
                ? 0
                : 2;

            List<TextSpan> textSpans = [
              TextSpan(
                text: lineChartType != LineChartType.waterTemperature
                    ? '$valueText ${S.current.genericRead} '
                    : '$valueText ',
                style: TextStyle(
                  color: getReadColor(),
                  fontWeight: FontWeight.w900,
                ),
              ),
              TextSpan(
                text: readSpot.y.toStringAsFixed(numberOfDecimals),
                style: const TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.w900,
                ),
              ),
            ];

            if (programmedSpot != null) {
              textSpans.addAll([
                TextSpan(
                  text: '\n$valueText ${S.current.genericProgrammed} ',
                  style: TextStyle(
                    color: getProgrammedColor(),
                    fontWeight: FontWeight.w900,
                  ),
                ),
                TextSpan(
                  text: programmedSpot.y.toStringAsFixed(numberOfDecimals),
                  style: const TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w900,
                  ),
                ),
              ]);
            }

            return LineTooltipItem(
              dateTxt,
              const TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.left,
              children: textSpans,
            );
          }).toList();
        },
      ),
    );
  }