handle_touches.md

Touch Interactivity

LineChart	BarChart	PieChart

The Touch Flow

When user touches on the chart, a touch event notifies to the chart's painter through a ValueNotifier that contains a concrete TouchInput that describes the type and details of the touch, then the specific chart detects the touched area and makes an object that contains touch informations, then some basic touch visualized effects will be apply, and finally it creates a concrete TouchResponse and sends it through a given StreamSink,

if you want to handle touch events, you should create a StreamController in your StatefulWidget (don't forget to dispose the StreamController on dispose method), pass the controller.sink to the chart's TouchData (inside the ChartData), then listen to it distinctly and do what you want to do with the given TouchResponse (for example change the touched section color or something like that).

How to use? (for example in LineChart)

In the Line and Bar Charts we show a built in tooltip on the touched spots, then you just need to config how to show it, just fill the touchTooltipData in the LineTouchData.

FlChart(
  chart: LineChart(
    LineChartData(
      lineTouchData: LineTouchData(
        touchTooltipData: TouchTooltipData (
          tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
          .
          .
          .
        )
      )
    )
  )
)

But if you want more customization on touch behaviors, make a StreamController<LineTouchResponse>, and pass it's sink to the chart and then listen to coming touch details(here contains the touched Spots, BarLine, and TouchInput)

StreamController<LineTouchResponse> controller;

@override
void initState() {
  super.initState();
  controller = StreamController();
  controller.stream.distinct().listen((LineTouchResponse response){
    /// do whatever you want and change any property of the chart.
  });
}

@override
Widget build(BuildContext context) {
  return FlChart(
    chart: LineChart(
      LineChartData(
        lineTouchData: LineTouchData(
          touchResponseSink: controller.sink,
          .
          .
          .
        )
      )
    )
  )
}