ChartMarkerProps

Configuration options for rendering markers in a chart series.

Props

The following table outlines the props for the ChartMarkerProps:

NameTypeDefaultDescription
border
ChartBorderProps
{ color: '', width: 2, dashArray: '' }

Defines the border styling for the marker, including width and color.

fill
string | null
null

Sets the fill color of the marker. Accepts valid CSS color values such as hex codes or RGBA. Defaults to the series color if not specified.

filled
boolean
false

Determines whether the marker should be filled with the series color. When set to true, the marker is filled using the corresponding series color, enhancing visual distinction. When set to false, the marker will be rendered with no fill or default styling.

height
number
5

Specifies the height of the marker in pixels.

highlightable
boolean
true

When set to true, markers are visually emphasized on hover or selection, enhancing visibility and user feedback during data exploration.

imageUrl
string
''

Sets the URL of the image to be used as a marker and it requires shape to be set to Image.

offset
ChartLocationProps
{ x: 0, y: 0 }

Adjusts the marker's position relative to its data point using horizontal and vertical offsets.

opacity
number
1

Sets the opacity of the marker. Accepts values from 0 (fully transparent) to 1 (fully opaque).

shape
ChartMarkerShape | null
null

Specifies the shape of the marker used in the series. Available options:

  • Circle - Circular marker.
  • Rectangle - Rectangular marker.
  • Triangle - Triangular marker.
  • Diamond - Diamond-shaped marker.
  • HorizontalLine - Horizontal line marker.
  • VerticalLine - Vertical line marker.
  • Pentagon - Pentagon-shaped marker.
  • InvertedTriangle - Inverted triangle marker.
  • Image - Custom image marker.
  • Star - Star-shaped marker.
visible
boolean
false

When set to true, the marker is rendered and visible on the chart.

width
number
5

Specifies the width of the marker in pixels.