Example of Range Selection in React Chart Component

/
/
RangeSelection

This sample illustrates the range selection feature in chart. Data can be selected under region by drag and drop.

More Details...

Loading....
Description

This sample demonstrates the selection behavior in a chart. Any point or a series can be selected in a chart by clicking or touching the point. We can also select the point while loading chart through selectedDataIndexes properties. Click to select a point or series, click and drag to enable rectangular selection. Rectangular selection will return the collection point that are selected under the region.

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.