Example of Selection in Javascript Chart Control


This sample demonstrates the different modes of selection and highlight behavior in the charts.

More Details...

Selection Mode:
Enable Multi Selection:
Selection Patterns:
Highlight Color:
Enable Highlight:
Highlight Patterns:

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 using Chart.Inject(Selection) method. More information on the selection can be found in this documentation section.