Trackball in Flutter Spark Chart

6 Aug 20264 minutes to read

Trackball displays tooltips for data points near the point where you touch the chart area. It can be used instead of data labels when you cannot show labels for all data points because of space constraints. This feature can be enabled using the trackball property. Trackball is activated using the activationMode property. Once it is activated, it appears in the UI and moves based on your touch movement until you stop touching the chart.

You can use the following properties to customize the appearance:

  • borderWidth - Represents the border width.
  • borderColor - Represents the border color.
  • backgroundColor - Represents the background color for trackball.
  • width - Represents the width of trackball line.
  • color - Represents the color of trackball line.
@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfSparkLineChart(
            axisLineWidth: 0,
            trackball: SparkChartTrackball(
              backgroundColor: Colors.red.withOpacity(0.8),
              borderColor: Colors.red.withOpacity(0.8),
              borderWidth: 2,
              color: Colors.red,
              labelStyle: TextStyle(color: Colors.black),
              activationMode: SparkChartActivationMode.tap
            ),
            marker: SparkChartMarker(
                      displayMode: SparkChartMarkerDisplayMode.all),
            data: <double>[
              5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
            ],
          )
        )
      );
    }

Sparkline trackball

Activation mode

The activationMode property is used to restrict the visibility of trackball based on the touch actions. The default value of this property is ActivationMode.tap.

@override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: SfSparkAreaChart(
            trackball: SparkChartTrackball(
              activationMode: SparkChartActivationMode.doubleTap
            ),
            data: <double>[
              5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
            ],
          )
        )
      );
    }