How can I get both highlighted points in an ordinalComboChart?

Question

I'm making use of the charts_flutter package to display data for my project, however, I am having difficulty getting both points in my graph to display when I select a point, instead, it just returns the same value for both points as you can see here. How can I get the values of both points at the selected time to be returned?

My current code:

    @override
  Widget build(BuildContext context) {
    final staticTicks = <TickSpec<String>>[
      const TickSpec('06:00'),
      const TickSpec('09:00'),
      const TickSpec('12:00'),
      const TickSpec('15:00'),
      const TickSpec('18:00'),
      const TickSpec('21:00')
    ];
    return OrdinalComboChart(seriesList,
        animate: animate,
        defaultRenderer:
            BarRendererConfig(groupingType: BarGroupingType.groupedStacked),
        behaviors: [
          ChartTitle('Production Graph:',
              behaviorPosition: BehaviorPosition.top,
              titleOutsideJustification: OutsideJustification.start,
              innerPadding: 18),
          ChartTitle(
            'Production(KwH):',
            behaviorPosition: BehaviorPosition.start,
            titleOutsideJustification: OutsideJustification.middleDrawArea,
          ),
          LinePointHighlighter(
              symbolRenderer: CustomCircleSymbolRenderer(),
              showHorizontalFollowLine:
                  LinePointHighlighterFollowLineType.nearest,
              showVerticalFollowLine:
                  LinePointHighlighterFollowLineType.nearest),
          SelectNearest(eventTrigger: SelectionTrigger.tapAndDrag)
        ],
        selectionModels: [
          SelectionModelConfig(changedListener: (SelectionModel model) {
            if (model.hasDatumSelection) {
              final value = model.selectedSeries[0]
                  .measureFn(model.selectedDatum[0].index);
              final value2 = model.selectedSeries[0]
                  .measureFn(model.selectedDatum[0].index);
              CustomCircleSymbolRenderer.value =
                  value.toString(); // paints the tapped value
              CustomCircleSymbolRenderer.value2 = value2.toString();
            }
          })
        ],
        customSeriesRenderers: [
          LineRendererConfig(
              // ID used to link series to this renderer.
              customRendererId: 'customLine')
        ],
        domainAxis: charts.OrdinalAxisSpec(
            viewport: charts.OrdinalViewport('06:00', 61),
            tickProviderSpec:
                charts.StaticOrdinalTickProviderSpec(staticTicks)),
        primaryMeasureAxis: primaryMeasureAxis);
  }
}

class CustomCircleSymbolRenderer extends CircleSymbolRenderer {
  static String? value;
  static String? value2;
  @override
  void paint(ChartCanvas canvas, Rectangle<num> bounds,
      {List<int>? dashPattern,
      Color? fillColor,
      FillPatternType? fillPattern,
      Color? strokeColor,
      double? strokeWidthPx}) {
    super.paint(canvas, bounds,
        dashPattern: dashPattern,
        fillColor: fillColor,
        fillPattern: fillPattern,
        strokeColor: strokeColor,
        strokeWidthPx: strokeWidthPx);
    canvas.drawRect(
        Rectangle(bounds.left - 5, bounds.top - 30, bounds.width + 10,
            bounds.height + 10),
        fill: Color.white);
    var textStyle = style.TextStyle();
    textStyle.color = Color.black;
    textStyle.fontSize = 15;
    canvas.drawText(TextElement.TextElement("$value kWh", style: textStyle),
        (bounds.left).round(), (bounds.top - 28).round());
  }
}

Any help is appreciated!

How can I get both highlighted points in an ordinalComboChart?

0 Answers0