Selection in TypeScript Chart control

18 Nov 20181 minute to read

The chart provides selection support for both series and individual data points when users interact with the chart using mouse clicks.

When a data point is clicked, the corresponding series legend item is also selected.

Multiple selection modes are available to help select and analyze chart data effectively. The supported selection modes are:

  • None
  • Point
  • Series
  • Cluster
  • DragXY
  • DragX
  • DragY

Point

A single data point can be selected by setting the selectionMode property to Point.

Series

An entire series can be selected by setting the selectionMode property to Series.

Cluster

Cluster selection allows selection of data points that share the same index across all series. This can be enabled by setting the selectionMode property to Cluster.

Rectangular selection

DragXY, DragX and DragY

Rectangular selection enables users to select a group of data points within a defined region by setting the selectionMode property accordingly.

  • DragXY – Selects data points along both the horizontal and vertical axes.
  • DragX – Selects data points along the horizontal axis.
  • DragY – Selects data points along the vertical axis.

The selected data points are returned as an array collection through the dragComplete event.

Selection type

Multiple data points or series can be selected simultaneously by enabling the isMultiSelect property.

Selection on load

Data points or series can be selected programmatically when the chart is loaded by using the selectedDataIndexes property.

Selection through on legend

Points or series can also be selected through the legend by enabling the toggleVisibility property.
To visually emphasize the selected series, use the enableHighlight property.

When highlightMode is set to Series, Cluster, or Point, legend highlighting occurs even if enableHighlight is set to false. In this case, highlightMode takes precedence, and hovering over legend items highlights the corresponding series.

Customization for selection

Custom styles can be applied to selected points or series by using the selectionStyle property.

See Also