How to disable the trackball marker for specific series in Cartesian charts (SfCartesianChart) ?
In this article, we described how to disable the trackball marker for specific series in Flutter Cartesian charts.
Flutter Cartesian Chart widget provides support for customizing the trackball marker to render only for the particular series of our choice in the chart using the markerVisibility property of the TrackballMarkerSettings available in the chart.
For example, consider there are two cartesian line series in the chart, and if you need to show only the trackball marker for the first series alone in the chart when the trackball is activated on user interaction, then you can use the markerVisibility property of the TrackballMarkerSettings to modify the trackball marker’s visibility mode and the series MarkerSettings property values accordingly, in order to disable the trackball marker for the particular series in the chart.
Refer the following instructions, to customize the trackball marker to render only for the particular series in the chart.
Customization of trackball marker to render only for a particular series
Step 1: Initialize the SfCartesianChart with two-line series for customizing the trackballs marker to render only for the first-line series alone.
@override
Widget build(BuildContext context) {
return SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <LineSeries<_SalesData, String>>[
LineSeries<_SalesData, String>(
dataSource: chartData1,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
),
LineSeries<_SalesData, String>(
dataSource: chartData2,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
)
]
)
Step 2: Enable the trackball behavior for the chart using the trackballBehavior property and in the markerSettings property of the TrackballBehavior, set the markerVisibility property of the TrackballMarkerSettings as TrackballVisibilityMode.auto (Setting the trackball marker visibility mode as auto will check whether the isVisible property value of series MarkerSettings is true or false and render the trackball marker for that series). After that, inside the second series for which the trackball marker is to be disabled, disable the MarkerSettings by setting the isVisible property to false. In other series and inside the first series, set the isVisible property of its MarkerSettings to true and set the width and height properties of the marker as “0” so that the marker will get only rendered when the trackball is activated in the chart on user interaction.
late Trackballbehavior _trackballBehavior;
@override
void initState(){
_trackballBehavior = TrackballBehavior(
enable: true,
markerSettings: TrackballMarkerSettings(
// Setting the marker visibility mode as auto
markerVisibility: TrackballVisibilityMode.auto,
)
);
super.initState();
}
@override
Widget build(BuildContext context) {
return SfCartesianChart(
primaryXAxis: CategoryAxis(),
// Enabled trackball behavior for the chart
trackballBehavior: _trackballBehavior ,
series: <LineSeries<_SalesData, String>>[
LineSeries<_SalesData, String>(
dataSource: chartData1,
name: ‘Line Series 1’,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
markerSettings:
// Enabled and setting the marker width and height to 0 in order to render marker only
// when the trackball is activated.
MarkerSettings(isVisible: true, width: 0, height: 0)
),
LineSeries<_SalesData, String>(
dataSource: chartData2,
name: ‘Line Series 2’,
xValueMapper: (_SalesData sales, _) => sales.year,
yValueMapper: (_SalesData sales, _) => sales.sales,
markerSettings: MarkerSettings(
isVisible: false // Setting false for the second series to not to render marker for this series.
)
)
]
)
Screenshots
Trackball marker rendered only for first series
For more information on trackball marker customization, find the user guide here.
