Example of Selection in React Chart Component

/
/
SelectionChart

This sample demonstrates the selection behavior and its mode along with the highlight and highlight patterns in the chart.

More Details...

Loading....
Description

In this sample, any point or series can be selected in the chart by clicking on or touching the point. You can also change the selection mode by changing the Selection Mode option in the properties panel. You can enable multiple selections with the Enable Multi Selection option. You can also select a point while loading a chart using the SelectedDataIndexes option. While hovering the point, the point is highlighted using the Enable Highlight option, as well as you can set different highlight patterns and colors using the Highlight Patterns and Highlight Color option.

Tap to select a point or series, double tap and drag to enable rectangular selection in touch enabled devices.

Chart supports seven mode of selection which can be set using SelectionMode property.

  • Series - Select the series in chart.
  • Point - Select a point in the series .
  • Cluster - Select a group of points in the chart.
  • DragXY - Rectangular selection with respect to both axis.
  • DragX - Rectangular selection with respect to horizontal axis.
  • DragY - Rectangular selection with respect to vertical axis.
  • Lasso - Select free form of selection area points.

Injecting Module

Chart component features are segregated into individual feature-wise modules. To use selection feature, we need to inject Selection module into services.


More information about selection can be found in this   documentation section.