Example of Keyboard Navigation in ASP.NET MVC Chart Control
Keyboard shortcuts can be used to interact with chart functionality. In the example, various key combinations can be used to interact with a chart.
DEMO
SOURCE
The key combinations listed can be used in a chart to initiate various actions:
-
FOCUS ELEMENTS
- Alt + J - Moves the focus to the chart element.
- Tab - Moves the focus to the next element in the chart.
- Shift + Tab - Moves the focus to the previous element in the chart.
-
SERIES
- Down arrow - Moves the focus to the data point on the left side of the selected point.
- Up arrow - Moves the focus to the data point on the right side of the selected point.
- Left arrow - Moves the focus to the next series in our Charts component.
- Right arrow - Moves the focus to the previous series in our Charts component.
- ESC - Cancels the tooltip for the data point.
- Enter/Space - Selects the data point in the series.
-
Legend
- Down/Left arrow - Moves the focus to the legend left of the selected legend item.
- Up/Right arrow - Moves the focus to the legend right of the selected legend item.
- Enter/Space - Toggles the visibility of the corresponding series.
-
ZOOMING AND PANNING
- Ctrl + + - Zoom in to chart.
- Ctrl + - - Zoom out of the chart.
- Down/Up arrow - Pans the chart vertically.
- Left/Right arrow - Pans the chart horizontally.
- R - Reset the zoomed chart.
-
PRINT
- Ctrl + P - Prints the Charts component.