How to show or hide crosshair dynamically in Flutter Cartesian charts (SfCartesianChart) ?
In this article, we described how to show or hide the crosshair dynamically in Flutter Cartesian charts.
The Flutter Cartesian chart widget provides support for showing or hiding the crosshair dynamically using public methods. Public methods are methods that can be called by using the class object where they are defined. The chart widget offers the following public methods to show or hide the crosshair dynamically:
- show
- showByIndex
- hide
Follow these instructions to use the crosshair 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 display the crosshair for the specified data points (x and y). If you wish to show the crosshair based on pixel values, you can pass the optional argument 'pixel' in the show method:
@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();
}
Screenshots
Show by point
Show by pixel
Show by index
For more information on tooltip public methods, refer to the user guide.
View the Github Sample here.
Conclusion
I hope you enjoyed learning about how to show or hide crosshair dynamically in Flutter Cartesian charts (SfCartesianChart).
You can refer to our Flutter CartesianChart feature tour page to learn 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!
