Selection
The Chart category axis enables users to select a specific range by clicking, dragging, resizing, or scrolling with the mouse wheel.
The following example demonstrates a range selection and a selection that filters data in the main pane.
Enabling Selection
To enable the selection, set the select configuration on the category axis item. The from and to properties define the initial selected range through zero-based category indices.
Selection is supported only for horizontal category axes.
<kendo-chart-category-axis>
<kendo-chart-category-axis-item
[categories]="months"
[select]="{ from: 3, to: 8 }"
>
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>Use the selectEnd event to react when the user changes the selection. The event provides the updated from and to indices.
The following example demonstrates how to enable the selection and display the selected range.
Configuring the Selection Options
The select configuration provides the following options to control the selection behavior:
fromandto—Set the lower and upper boundaries of the selected range.minandmax—Limit the range that the user can select. The selection handles cannot move beyond these boundaries.mousewheel—Configure the mouse wheel behavior. Setzoomtoboth,left, orrightto control the zoom direction. Setreversetotrueto invert the scroll direction.
The following example demonstrates how to configure the selection options.
Filtering Data with Navigator Selection
You can use the selection to filter data in another pane, similar to the Stock Chart navigator. Add a second pane with its own category axis and bind both axes to the same data. Use the selectEnd event to update the min and max of the main axis.
The following example demonstrates how to filter the main pane data through the selection.
Support and Learning Resources
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- CategoryAxisSelectComponent API
- Axes
- Chart Area
- Crosshairs
- Error Bars
- Labels
- Legend
- Notes
- Panes
- Plot Area
- Plot Bands
- Series
- Title
- Tooltip
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base