How to Enable and Disable Trackball for individual Series in Flutter Cartesian Chart?

In Flutter Cartesian Charts, the trackball feature provides users with interactive trackball tooltips that display detailed information about data points. This feature enhances the usability of charts by offering insights into specific data points as users interact with chart series.

The trackballBehavior in the chart allows enabling trackball functionality for all series by default. This sets the foundation for interacting with the chart and viewing trackball tooltips on different data points. However, to enable or disable trackball tooltips on specific series can be achieved by using the enableTrackball property in individual series. This feature helps in creating more customized visualizations where trackball tooltips appear only for specific series, improving clarity and user experience.

In this article, we will walk through how to enable or disable trackball tooltips for specific series in a Flutter Cartesian chart. The following steps explains how to dynamically enable or disable trackball tooltips for specific series in Flutter Cartesian charts.

Step 1: Create a model class to hold your chart data. Here, the data consists of monthly expenses for John, Mary and Alex. This model class captures three properties: the month as a string, and three double values representing expenses for John, Mary and Alex, respectively.

class _ChartData {
  _ChartData(
    this.month,
    this.johnExpense,
    this.maryExpense,
    this.alexExpense,
  );
  final String month;
  final double johnExpense;
  final double maryExpense;
  final double alexExpense;
}

Step 2: Within the State class, define and initialize your chart data along with boolean flags to manage trackball states for each series. Initialize the TrackballBehavior to activate trackball functionality. Additionally, configure the Legend to display a legend for the chart.

class TrackballChartState extends State<TrackballChart> {
 List<_ChartData> _chartData = [];
 bool _johnTrackball = true;
 bool _maryTrackball = true;
 bool _alexTrackball = true;
 late TrackballBehavior _trackballBehavior;
 late Legend _legend;

 @override
 void initState() {
   _chartData = <_ChartData>[
     _ChartData('Jan', 35, 28, 40),
     _ChartData('Feb', 28, 44, 35),
     _ChartData('Mar', 34, 32, 36),
     _ChartData('Apr', 32, 40, 38),
     _ChartData('May', 40, 30, 42),
   ];
   _trackballBehavior = TrackballBehavior(
     enable: true,
   );
   _legend = Legend(
     isVisible: true,
     position: LegendPosition.bottom,
   );
   super.initState();
 }   

Step 3: Construct the SfCartesianChart widget to visualize the data. This includes a Legend at the bottom (LegendPosition.bottom) for easy series identification. The CategoryAxis is used for the horizontal axis to map categorical data. The NumericAxis plots expenses vertically.

Add StackedLineSeries for John, Mary, and Alex, employing xValueMapper and yValueMapper for data mapping, with enableTrackball linked to respective boolean flags for tooltip control. The TrackballBehavior is enabled globally for interactive tooltips across all series by default.

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Expanded(
        child: SfCartesianChart(
          legend: _legend,
          primaryXAxis: CategoryAxis(),
          primaryYAxis: NumericAxis(),
          series: <CartesianSeries<_ChartData, String>>[
            StackedLineSeries<_ChartData, String>(
              dataSource: _chartData,
              xValueMapper: (_ChartData data, int index) => data.month,
              yValueMapper: (_ChartData data, int index) => data.johnExpense,
              name: 'John',
              enableTrackball: _johnTrackball,
            ),
            StackedLineSeries<_ChartData, String>(
              dataSource: _chartData,
              xValueMapper: (_ChartData data, int index) => data.month,
              yValueMapper: (_ChartData data, int index) => data.maryExpense,
              name: 'Mary',
              enableTrackball: _maryTrackball,
            ),
            StackedLineSeries<_ChartData, String>(
              dataSource: _chartData,
              xValueMapper: (_ChartData data, int index) => data.month,
              yValueMapper: (_ChartData data, int index) => data.alexExpense,
              name: 'Alex',
              enableTrackball: _alexTrackball,
            ),
          ],
          trackballBehavior: _trackballBehavior,
        ),
      ),
      _buildTrackballToggler(),
    ],
  );
}

Step 4: Design toggle switches to enable or disable the trackball for each series dynamically. We added interactivity by using a Switch widget to dynamically toggle trackball tooltips. These switches are wrapped in a Container for padding, and organized in a Row with MainAxisAlignment.spaceEvenly for even spacing.

Each switch, created with _buildTrackballToggle, is labeled for John, Mary or Alex, and its value is linked to the respective boolean flag (_johnTrackball, _maryTrackball or _alexTrackball). Changes are handled in the onChanged callback, updating the flag with setState to reflect real-time changes in tooltip activation. This setup allows users to intuitively customize the chart experience by enabling or disabling trackball tooltips for each series as needed.

Widget _buildTrackballToggler() {
  return Container(
    padding: EdgeInsets.all(16.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _buildTrackballToggle('John', _johnTrackball, (value) {
          setState(() {
            _johnTrackball = value;
          });
        }),
        _buildTrackballToggle('Mary', _maryTrackball, (value) {
          setState(() {
            _maryTrackball = value;
          });
        }),
        _buildTrackballToggle('Alex', _alexTrackball, (value) {
          setState(() {
            _alexTrackball = value;
          });
        }),
      ],
    ),
  );
}

Widget _buildTrackballToggle(
    String seriesName, bool currentValue, ValueChanged<bool> onChanged) {
  return Column(
    children: [
      Text('Trackball for $seriesName'),
      Switch(
        value: currentValue,
        onChanged: onChanged,
        activeColor: Colors.teal,
      ),
    ],
  );
}

Now, dynamically enable and disable the trackball tooltip for specific series in a Flutter Cartesian Chart has been implemented as shown below.

View the sample in GitHub.

Conclusion

I hope you enjoyed learning about how to enable and disable Trackball series in Flutter Cartesian Chart.

You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter CartesianChart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!