Selection and Highlight in React Chart

Selection and highlight help users focus on important data. Use ChartSelection to select items and ChartHighlight to emphasize them on hover.

Selection

Enable selection by adding the ChartSelection component inside Chart.

Key properties (ChartSelectionProps):

• mode : Controls what can be selected.
  • 'Series': Selects the entire series.
  • 'Point': Selects individual data points.
  • 'Cluster': Selects related points across series for the same x-value.
• allowMultiSelection : Select multiple points/series/clusters.
• selectedDataIndexes : Preselect specific points when the chart renders.
• pattern : The visual pattern applied to highlighted data points.

Highlight

Use the ChartHighlight component to emphasize items on hover without changing selection state.

Key properties (ChartHighlightProps):

• mode : 'Series' | 'Point' | 'Cluster'.
• fill : Custom hover color.
• pattern : The visual pattern applied to highlighted data points.

Highlight Color

Customize the fill property to control the color used during hover. You can customize the color used during hover by setting the fill property in the ChartHighlight component. This property controls the fill color applied to the highlighted chart elements when the user hovers over them.