charts_flutter: Show y-axis value for corresponding x-axis value flutter

Question

I am trying to display a time series chart in my flutter app. The problem is when I click on a date on the x-axis, the corresponding y-value is not displayed on the y-axis. I searched intensively in the documentation, but there is no example provided like this. What do I need to do differently?

class MyLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  MyLineChart(this.seriesList, {this.animate});

  @override
  Widget build(BuildContext context) {
    return new charts.TimeSeriesChart(
      seriesList,
      animate: animate,
      dateTimeFactory: const charts.LocalDateTimeFactory(),
    );
  }
}

Answer 1

Try this, using LinePointHighlighter :

class MyLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  MyLineChart(this.seriesList, {this.animate});

  @override
  Widget build(BuildContext context) {
    return new charts.TimeSeriesChart(
      seriesList,
      animate: animate,
      dateTimeFactory: const charts.LocalDateTimeFactory(),
      behaviors: [
        LinePointHighlighter(
          drawFollowLinesAcrossChart: true,
          showHorizontalFollowLine: LinePointHighlighterFollowLineType.all,
        ),
      ],
    );
  }
}

EDIT: Excuse me, I misread your question.

To show the values on the y-axis I think you will have to create your own LinePointHighlighter , or SymbolRenderer to pass your LinePointHighlighter. Both require you to paint on the chart's canvas .

Use SelectionModelConfig to get the selected value you want to show. See: https://google.github.io/charts/flutter/example/behaviors/selection_callback_example

I haven't done this myself, but I hope this will help you.