How to show or hide crosshair dynamically in Flutter Cartesian charts (SfCartesianChart) ?

5 mins read

In this article, we described how to show or hide the crosshair dynamically in Flutter Cartesian charts.

Flutter Cartesian chart widget provides support for showing or hiding the crosshair dynamically using the public methods. Public methods are methods that can be called by using the class object where they are defined. Likewise, chart widget also has some public methods to show or hide the crosshair dynamically such as.

show
showByIndex
hide

Refer the following instructions to use the crosshairs public methods to show or hide the crosshair dynamically.

show method

The show method, activates the crosshair at the specified location provided by the user.

Step 1: Initialize the SfCartesianChart and CrosshairBehavior globally.

late SfCartesianChart chart;
late CrosshairBehavior _crosshairBehavior;
 
@override
void initState(){
  _crosshairBehavior = CrosshairBehavior(enable: true);
  super.initState();
}
 
@override
Widget build(BuildContext context) {
 
 chart = SfCartesianChart(
  crosshairBehavior: _crosshairBehavior,
  series: <CartesianSeries>[
    ColumnSeries<ChartData, double>(
        enableTooltip: true,
        dataSource: chartData,
        xValueMapper: (ChartData data, _) => data.x,
        yValueMapper: (ChartData data, _) => data.y
      )
   ]
 );
}

Step 2: Initialize the button and chart in the build method and in the button click event, you can initialize the public methods to show the crosshair in the required point.

@override
Widget build(BuildContext context) {
 return Scaffold(
  body: Center(
    child: Column(
      children: <Widget>[
        TextButton(
          child: Text('Show'),
          onPressed: ()
          {
            _crosshairBehavior.show(40, 10);
          }
        ),
        Container(child: chart)
      ]
    )
  )
 );
}

By default, the show method will show the crosshair for the specified data points (x and y). If you wish to show the crosshair based on the pixel values, then you can pass the optional argument in the show method as pixel. Find the following code to accomplish this.

@override
Widget build(BuildContext context) {
 return Scaffold(
  body: Center(
    child: Column(
      children: <Widget>[
        TextButton(
          child: Text('Show'),
          onPressed: ()
          {
            _crosshairBehavior.show(100, 150, 'pixel');
          }
        ),
        Container(child: chart)
      ]
    )
  )
 );
}

showByIndex method

The showByIndex method, displays the crosshair at the specified point index.

Step 1: Initialize the SfCartesianChart and CrosshairBehavior globally.

late SfCartesianChart chart;
late CrosshairBehavior _crosshairBehavior;
 
@override
void initState(){
  _crosshairBehavior = CrosshairBehavior(enable: true);
  super.initState();
}
 
@override
Widget build(BuildContext context) {
 
 chart = SfCartesianChart(
  crosshairBehavior: _crosshairBehavior,
  series: <CartesianSeries>[
    ColumnSeries<ChartData, double>(
        enableTooltip: true,
        dataSource: chartData,
        xValueMapper: (ChartData data, _) => data.x,
        yValueMapper: (ChartData data, _) => data.y
      )
   ]
 );
}

Step 2: Initialize the button and chart in the build method and in the button click event, you can initialize the public methods to show the crosshair based on point index.

@override
Widget build(BuildContext context) {
  return Scaffold(
  body: Center(
    child: Column(
      children: <Widget>[
        TextButton(
          child: Text('Show'),
          onPressed: ()
          {
             _crosshairBehavior.showByIndex(3);
          }
        ),
        Container(child: chart)
      ]
    )
  )
 );
}

hide method

The hide method hides the displaying crosshair.

Step 1: Initialize the SfCartesianChart and CrosshairBehavior globally.

late SfCartesianChart chart;
late CrosshairBehavior _crosshairBehavior;
 
@override
void initState(){
  _crosshairBehavior = CrosshairBehavior(enable: true);
  super.initState();
}
 
@override
Widget build(BuildContext context) {
 chart = SfCartesianChart(
  crosshairBehavior: _crosshairBehavior,
  series: <CartesianSeries>[
    ColumnSeries<ChartData, double>(
        enableTooltip: true,
        dataSource: chartData,
        xValueMapper: (ChartData data, _) => data.x,
        yValueMapper: (ChartData data, _) => data.y
      )
   ]
 );
}

Step 2: Initialize the button and chart in the build method and in the button click event, you can initialize the public methods to hide the crosshair.

@override
Widget build(BuildContext context) {  
 return Scaffold(
  body: Center(
    child: Column(
      children: <Widget>[
        TextButton(
          child: Text('Hide'),
          onPressed: hide
        ),
        Container(child: chart)
      ]
    )
  )
 );
}
 
void hide() {
    _crosshairBehavior.hide();
}