New to Telerik UI for Blazor? Download Free 30-day trial

Chart - Keyboard Navigation

  • Keyboard-navigation.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Focus

  • Alt + W focuses the first component in the example

Supported keys and user actions

Categorical Charts

  • Left arrow moves focus to the left point in the series.
  • Right arrow moves focus to the right point in the series.
  • Up arrow For stacked Bar/Column charts and Line/Area charts, pressing the Up arrow key moves the focus to the next series item. The order in which this happens depends on the coordinates of the series items. For stacked Bar/Column charts and Line/Area charts, the focus jumps to the closest point available. If there are multiple series on a single pane, the focus moves through all items of the series of the same type before moving to the next type. For example, in a stacked bar with two series and a single line series, the focus first goes through all bar series before moving to the line series.

    For Regular Bar charts and its derivatives (Waterfall, Candlestick, etc.), the focus moves according to the database order. Pressing the Up arrow key navigates through items based on their order in the database.
  • Down arrow For stacked Bar/Column charts and Line/Area charts, pressing the Down arrow key moves the focus to the previous series item. The order in which this happens depends on the coordinates of the series items. For stacked Bar/Column charts and Line/Area charts, the focus jumps to the closest point available. If there are multiple series on a single pane, the focus moves through all items of the series of the same type before moving to the next type. For example, in a stacked bar with two series and a single line series, the focus first goes through all bar series before moving to the line series.

    For Regular Bar charts and its derivatives (Waterfall, Candlestick, etc.), the focus moves according to the database order. Pressing the Down arrow key navigates through items based on their order in the database.
  • Donut Charts

  • Left arrow moves focus through the points to the anti-clockwise direction.
  • Right arrow moves focus through the points to the clockwise direction.
  • Up arrow moves focus to the outer series.
  • Down arrow moves focus to the inner series.
  • Pie Charts

  • Left arrow moves focus through the points to the anti-clockwise direction.
  • Right arrow moves focus through the points to the clockwise direction.
  • Scatter Charts

  • Left arrow moves focus to the left item in the current series.
  • Right arrow moves focus to the right item in the current series.
  • Up arrow moves focus through the series. Since the Scatter Chart is chaotic by design, the only natural and predictable order is the one from the data source.
  • Down arrow moves focus through the series. Since the Scatter Chart is chaotic by design, the only natural and predictable order is the one from the data source.
  • Radar Charts

  • Left arrow moves focus to the left item in the current series.
  • Right arrow moves focus to the right item in the current series.
  • Up arrow For stacked RadarColumn charts, pressing the Up arrow moves focus through the points to the clockwise direction.

    For stacked RadarLine/Area charts, pressing the Up arrow moves focus to the points away from the center of the chart.
  • Down arrow For stacked RadarColumn charts, pressing the Down arrow moves focus through the points to the anti-clockwise direction.

    For stacked RadarLine/Area charts, pressing the Down arrow moves focus to the points towards the center of the chart.
  • Heatmap Charts

  • Left/Right/Up/Down arrow The arrow keys will move through items in the respective direction, skipping over empty spaces.

Description

Keyboard navigation provides all web and app users with a fast keyboard-only navigation capability and is also part of the web accessibility features - it enables users with disabilities to fully control their app components access through the keyboard.

The navigation order in which interactive items receive keyboard focus has to be logical and intuitive.

The keyboard navigation of the Telerik UI for Blazor Chart is always enabled, as demonstrated in this demo.

This Charts and Graphs Keyboard Navigation example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.