How to customize crosshair tooltip in Flutter CartesianChart?
The CrosshairBehavior supports drawVerticalAxisLine, drawVerticalAxisTooltip, drawHorizontalAxisLine, drawHorizontalAxisTooltip, and onPaint public methods to customize the crosshair tooltip and its position.
In this article, we will explain how to customize the crosshair tooltip value and its position by extending the crosshair behavior and using public methods.
The show method determines the position of the crosshair based on the provided coordinates and displays it accordingly. Additionally, we customized the appearance of both horizontal and vertical axis lines using the drawHorizontalAxisLine and drawVerticalAxisLine methods respectively. And we adjusted the rendering of tooltips along with axes, by modifying the behavior of drawVerticalAxisTooltip and drawHorizontalAxisTooltip methods. Finally, the onPaint method helps us design a unique tooltip with a custom position and style. Meanwhile, the hide method ensures that the crosshair’s state resets correctly, ensuring smooth functionality.
The following steps explain how to customize the crosshair tooltip and its position.
Step 1: Initialize the list chartData which stores the data source. Then create the SfCartesianChart widget with the SplineSeries and assign the chartData to the dataSource property and map the x, y values to xValueMapper, yValueMapper properties respectively.
final List<ChartData> chartData = [
ChartData(DateTime(2024, 2, 1), 1),
ChartData(DateTime(2024, 2, 2), 19),
ChartData(DateTime(2024, 2, 3), 11),
ChartData(DateTime(2024, 2, 4), 41),
ChartData(DateTime(2024, 2, 5), 11),
ChartData(DateTime(2024, 2, 6), 51),
ChartData(DateTime(2024, 2, 7), 71),
ChartData(DateTime(2024, 2, 8), 31),
ChartData(DateTime(2024, 2, 9), 15),
ChartData(DateTime(2024, 2, 10), 21),
ChartData(DateTime(2024, 2, 11), 32),
ChartData(DateTime(2024, 2, 12), 23),
ChartData(DateTime(2024, 2, 13), 21),
ChartData(DateTime(2024, 2, 14), 12),
ChartData(DateTime(2024, 2, 15), 40),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfCartesianChart(
primaryXAxis: DateTimeAxis(dateFormat: DateFormat.MEd()),
series: <CartesianSeries<ChartData, DateTime>>[
SplineSeries(
dataSource: chartData,
xValueMapper: (ChartData sales, _) => sales.x,
yValueMapper: (ChartData sales, _) => sales.y,
),
],
),
);
}
class ChartData {
ChartData(this.x, this.y);
final DateTime x;
final double y;
}
Step 2: Within the global scope, declare a string field horizontalText to hold the horizontal axis value and declare verticalText to hold the vertical axis value when hovering over the chart. Then declare the onCrosshairPositionChanging callback in the SfCartesianChart to capture the horizontal and vertical axis interaction values and assign them to the horizontalText and verticalText fields respectively.
String verticalText = '';
String horizontalText = '';
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfCartesianChart(
onCrosshairPositionChanging: (CrosshairRenderArgs args) {
if (args.orientation != null) {
if (args.orientation == AxisOrientation.horizontal) {
horizontalText = args.text;
}
if (args.orientation == AxisOrientation.vertical) {
verticalText= args.text;
}
}
},
series: <CartesianSeries<ChartData, DateTime>>[
.....
Step 3: Create a _CustomCrosshairBehavior class and extend from CrosshairBehavior. Then set the true for enable property and set ActivationMode.singleTap activationMode of activationMode getter field.
class _CustomCrosshairBehavior extends CrosshairBehavior {
@override
bool get enable => true;
@override
ActivationMode get activationMode => ActivationMode.singleTap;
}
Step 4: Override the drawHorizontalAxisLine and drawVerticalAxisLine methods, and customize the stroke painting by applying the dashArray fields and invoking the super method to update the customized stroke paint.
class _CustomCrosshairBehavior extends CrosshairBehavior {
@override
void drawHorizontalAxisLine(PaintingContext context, Offset offset, List<double>? dashArray, Paint strokePaint) {
strokePaint
..isAntiAlias = true
..strokeCap = StrokeCap.round
..color = Colors.red
..strokeWidth = 1.2;
dashArray = [10, 15, 10];
super.drawHorizontalAxisLine(context, offset, dashArray, strokePaint);
}
@override
void drawVerticalAxisLine(PaintingContext context, Offset offset, List<double>? dashArray, Paint strokePaint) {
strokePaint
..isAntiAlias = true
..strokeCap = StrokeCap.round
..color = Colors.green
..strokeWidth = 1.2;
dashArray = [5, 10, 5];
super.drawVerticalAxisLine(context, offset, dashArray, strokePaint);
}
}
Step 5: Disabling the default tooltip rendering by overriding the drawVerticalAxisTooltip and drawHorizontalAxisTooltip methods without invoking super class.
class _CustomCrosshairBehavior extends CrosshairBehavior {
@override
void drawVerticalAxisTooltip(PaintingContext context, Offset position, String text, TextStyle style,
[Path? path, Paint? fillPaint, Paint? strokePaint]) {
// Don't invoke super class to disable the default tooltip.
}
@override
void drawHorizontalAxisTooltip(PaintingContext context, Offset position, String text, TextStyle style,
[Path? path, Paint? fillPaint, Paint? strokePaint]) {
// Don't invoke super class to disable the default tooltip.
}
}
Step 6: Declare the position field in the _CustomCrosshairBehavior class. In the show override method, to catch the touch event position.
class _CustomCrosshairBehavior extends CrosshairBehavior {
Offset? position;
@override
void show(x, double y, [String coordinateUnit = 'point']) {
if (coordinateUnit == 'pixel') {
position = Offset(x.toDouble(), y);
}
super.show(x, y, 'pixel');
}
}
Step 7: In the onPaint override method, invoke the superclass to render the crosshair line, and then draw the custom tooltip with a custom style using the position along with the ‘horizontalText’ and ‘verticalText’ fields.
class _CustomCrosshairBehavior extends CrosshairBehavior {
void onPaint(PaintingContext context, Offset offset, SfChartThemeData chartThemeData, ThemeData themeData) {
if (position != null && horizontalText != '' && verticalText != null) {
// Draws crosshair lines.
super.onPaint(context, offset, chartThemeData, themeData);
// Draw customized tooltip.
TextStyle textStyle = TextStyle(
color: Colors.white,
fontSize: 12,
background: Paint()
..color = Colors.blueGrey
..strokeWidth = 16
..strokeJoin = StrokeJoin.round
..style = dart_ui.PaintingStyle.stroke);
final String label = 'X : $horizontalText Y : $verticalText';
final Size labelSize = measureText(label, textStyle);
_drawText(context.canvas, label, _withInBounds(labelSize), textStyle);
}
}
Offset _withInBounds(Size labelSize) {
Offset tooltipPosition = position!.translate(20, 20);
double xPos = tooltipPosition.dx;
double yPos = tooltipPosition.dy;
if (parentBox != null) {
final Rect plotAreaBounds = parentBox!.paintBounds;
if (xPos + labelSize.width > plotAreaBounds.right) {
xPos = plotAreaBounds.right - labelSize.width - labelSize.height;
}
if (yPos + labelSize.height > plotAreaBounds.bottom) {
yPos = plotAreaBounds.bottom - (labelSize.height * 2);
}
}
return Offset(xPos, yPos);
}
void _drawText(Canvas canvas, String text, Offset point, TextStyle style) {
final TextPainter textPainter = TextPainter(
text: TextSpan(
text: text,
style: style.copyWith(fontWeight: dart_ui.FontWeight.bold)),
textAlign: TextAlign.center,
textDirection: dart_ui.TextDirection.ltr,
);
textPainter
..layout()
..paint(canvas, point);
}
}
Step 8: Then dispose the interaction position and their values in the hide method.
@override
void hide() {
position = null;
horizontalText = '';
verticalText = '';
super.hide();
}
Step 9: Initialize this _CustomCrosshairBehavior class to CrosshairBehavior property which is available in the SfCartesianChart.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfCartesianChart(
crosshairBehavior: _CustomCrosshairBehavior(),
series: <CartesianSeries<ChartData, DateTime>>[
.....
Now, the customized crosshair tooltip and position functionality have been implemented as shown below.
Conclusion
I hope you enjoyed learning about how to customize the crosshair tooltip and its position on a 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!
