javascripthighchartsangular2-highcharts

Highcharts pie charts individual sections are not receive focus. Tooltips are not displayed on focus


I have several pie charts with few sections, for example this one:

But there is few issues with it: it doesn't receive any focus when i'm trying to reach any of sections with "Tab" button, and, if i add tabindex="0" in devTools manually tooltip doesn't displayed on focus, is there any way to fix it (both of this issues with focus and tooltip)?


Solution

  • First of all - I encourage to use the official Highcharts react wrapper which is fully supported by Highcharts - https://github.com/highcharts/highcharts-react

    To navigate the chart by keyboard you need to attach the accessibility module - https://www.highcharts.com/docs/accessibility/accessibility-module

    demo: https://jsfiddle.net/BlackLabel/8jL40mvb/