Marker in React Chart
Markers in charts visually represent individual data points, enhancing clarity and user engagement. They can be customized in terms of shape, size, and color, making it easier to interpret data trends.
Displaying markers
To show markers on data points, set the visible property to true in the ChartMarker component.
Shape
The ChartMarker component supports a variety of shapes to visually represent data points, allowing for better distinction between series.
You can customize the marker shape using the shape property. The available options include:
-
Circle -
Rectangle -
Triangle -
Diamond -
Cross -
Plus -
HorizontalLine -
VerticalLine -
Pentagon -
InvertedTriangle -
Star
Marker as image
You can display custom images as markers in the chart by configuring the ChartMarker component. To do this, set the shape property to Image and provide the image URL using the imageUrl property.
Marker customization
You can enhance the appearance of markers in the ChartMarker component by adjusting various visual properties.
Key Customization Options:
-
fill: Sets the fill color of the marker. -
border: Configures the marker's outline, including color and width.
These properties help you align the marker design with your chart’s overall style and improve visual clarity.
Filled marker
By default, chart markers are displayed as solid shapes filled with the color assigned to their data series. This helps visually distinguish different series in the chart.
If you prefer transparent or hollow markers, you can customize this behavior by setting the filled property to false in the ChartMarker component.