How to Make the Marker Visible in Flutter CartesianChart?
In this article, we explain how to make the marker visible for a particular point alone in Flutter cartesian chart.
The SfCartesianChart widget provides an option to customize the markers by using the onMarkerRenderer callback. By using that callback, we can render the marker for a particular point. The following steps explain how to accomplish this,
Step 1: Initialize the chartData variable which holds the data source for the chart.
List<ChartSampleData>? chartData;
@override
void initState() {
chartData = <ChartSampleData>[
ChartSampleData(x: 0, y: 10),
ChartSampleData(x: 1, y: 25),
ChartSampleData(x: 2, y: 30),
ChartSampleData(x: 3, y: 45),
ChartSampleData(x: 4, y: 35),
ChartSampleData(x: 5, y: 50),
];
super.initState();
}
/// Chart sample data
class ChartSampleData {
/// Holds the data point values of x and y.
ChartSampleData({
this.x,
this.y,
});
/// Holds x value of the data point.
final double? x;
/// Holds y value of the data point.
final double? y;
}
Step 2: Create the SfCartesianChart widget with the LineSeries, assign the chartData to the dataSource property, and map the x, y values to xValueMapper, yValueMapper properties respectively.
To make marker visible for a particular point set the markerWidth and markerHeight as 0 for all points except that particular point in onMarkerRenderer.
@override
Widget build(BuildContext context) {
return SfCartesianChart(
onMarkerRender: (MarkerRenderArgs args) {
//Here we have hidden the marker except the fourth point and this can be changed based on your scenario
if (!(args.pointIndex == 3)) {
args.markerHeight = 0.0;
args.markerWidth = 0.0;
}
},
series: <LineSeries<ChartSampleData, double>>[
LineSeries<ChartSampleData, double>(
markerSettings: const MarkerSettings(isVisible: true),
dataSource: chartData!,
xValueMapper: (ChartSampleData sales, _) => sales.x,
yValueMapper: (ChartSampleData sales, _) => sales.y,
),
]
);
}
The above codes will render the marker at the fourth data point alone.
Conclusion
I hope you enjoyed learning about how to make the marker visible in Flutter CartesianChart.
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!
