Skip to main content

Handle Touches

Touch Interactivity​

LineChartBarChartPieChart

The Interaction Flow​

When an interaction happens, our renderers give us a FlTouchEvent. We pass it to correspond painter class. Then it calculates and gives us a TouchResponse (per interaction). Then we call the touchCallback function that provided through the chart's data.

If you set handleBuiltInTouches to true, it will handle touch by showing a tooltip or an indicator on the touched spot (in the line, bar and scatter charts), you can also handle your own touch handling along with the built-in touches.

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 configure how to show it, just fill the touchTooltipData in the LineTouchData.​
LineChart(
  LineChartData(
    lineTouchData: LineTouchData(
      touchTooltipData: TouchTooltipData (
        getTooltipColor: (touchedSpot) => Colors.blueGrey.withOpacity(0.8),
         .
         .
         .
      )
    )
  )
)
But if you want more customization on touch behaviors, implement the touchCallback and handle it.​

LineChart(
  LineChartData(
    lineTouchData: LineTouchData(
      touchCallback: (FlTouchEvent event, LineTouchResponse touchResponse) {
        if (event is FlTapUpEvent) {
          // handle tap here  
        }
      },
      .
      .
      .
    )
  )
)