Accessibility

Looking for the formal compliance report? Download the ApexCharts VPAT (Accessibility Conformance Report).

ApexCharts includes built-in accessibility support, including keyboard navigation for all chart types, ARIA attributes, and screen reader compatibility. These features make charts usable for people who rely on keyboards or assistive technologies.

Default Behaviour

When you import apexcharts (the full bundle), keyboard navigation is included and enabled by default. No additional configuration is required to get started.

// Full bundle — keyboard navigation included automatically
import ApexCharts from 'apexcharts'

const chart = new ApexCharts(document.querySelector('#chart'), {
  chart: { type: 'bar' },
  series: [{ name: 'Sales', data: [44, 55, 41, 67, 22, 43] }],
  xaxis:  { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }
})
chart.render()

Tree-Shaken Bundles

If you use a custom bundle built from apexcharts/core, you must explicitly import the keyboard feature:

import ApexCharts from 'apexcharts/core'
import 'apexcharts/bar'
import 'apexcharts/features/keyboard'   // required for keyboard navigation

const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

Keyboard Shortcuts

Tab to the chart (or click it) to give it focus, then use the following keys to navigate:

Key	Action
`→` Arrow Right	Move to the next data point
`←` Arrow Left	Move to the previous data point
`↑` Arrow Up	Move to the next series (skips collapsed series)
`↓` Arrow Down	Move to the previous series (skips collapsed series)
`Home`	Jump to the first data point in the current series
`End`	Jump to the last data point in the current series
`Enter` or `Space`	Fire a click event on the focused data point (same as a mouse click)
`Escape`	Exit keyboard navigation, return focus to the chart SVG

Configuration

Keyboard navigation options live under chart.accessibility:

const chart = new ApexCharts(document.querySelector('#chart'), {
  chart: {
    type: 'line',
    accessibility: {
      enabled: true,           // master switch for all accessibility features
      description: 'Monthly revenue trend for 2024',   // ARIA description
      announcements: {
        enabled: true,         // ARIA live region announcements
      },
      keyboard: {
        enabled: true,         // enable keyboard interaction
        navigation: {
          enabled: true,       // enable arrow key / Home / End navigation
          wrapAround: false,   // when false (default): clamp at edges
                               // when true: wrap from last point back to first
        },
      },
    },
  },
  series: [{ data: [30, 40, 35, 50, 49, 60, 70] }]
})

const chart = new ApexCharts(document.querySelector('#chart'), {
  chart: {
    type: 'bar',
    accessibility: {
      keyboard: {
        enabled: false   // keyboard focus and navigation disabled
      }
    }
  },
  series: [{ data: [44, 55, 41, 67, 22, 43] }]
})

By default, navigation stops at the first and last data points. Enable wrapAround to loop continuously through the series.

const chart = new ApexCharts(document.querySelector('#chart'), {
  chart: {
    type: 'line',
    accessibility: {
      keyboard: {
        navigation: {
          wrapAround: true   // pressing → at the last point jumps back to the first
        }
      }
    }
  },
  series: [{ data: [30, 40, 35, 50, 49, 60, 70] }]
})

ARIA Support

When accessibility is enabled, ApexCharts automatically:

Adds tabindex="0" to the SVG element so it is reachable via Tab
Applies aria-hidden to the tooltip when not in use
Removes aria-hidden from the tooltip when a data point is focused via keyboard
Applies the apexcharts-keyboard-focused CSS class to the currently focused element so you can style it

Styling the Focused Element

The focused data point receives the apexcharts-keyboard-focused class. Override its appearance in your stylesheet:

/* Highlight the focused data point */
.apexcharts-keyboard-focused {
  outline: 3px solid #0077cc;
  outline-offset: 2px;
}

Keyboard navigation is aware of the chart type and uses the appropriate tooltip and focus logic for each:

Chart type(s)	Navigation axes	Notes
line, area, scatter, bubble, radar, rangeArea	← → between data points, ↑ ↓ between series	Null values are skipped automatically
bar, column, barStacked, candlestick, boxPlot, rangeBar	← → between data points, ↑ ↓ between series	Hover state applied to bar element
pie, donut, polarArea	← → between slices	Slices act as data points; ↑ ↓ not applicable
radialBar	↑ ↓ between rings	One ring per series
heatmap, treemap	← → between cells, ↑ ↓ between rows/series	Tooltip positions to the right of the cell (or left if it would overflow)

When a chart is zoomed in, keyboard navigation stays within the visible range. Pressing past the zoom boundary snaps to the nearest visible data point in that direction rather than navigating to hidden data.

Firing Click Events via Keyboard

Pressing Enter or Space on a focused data point fires the same click event as a mouse click. This means any dataPointSelection or markerClick handlers you have configured will fire as expected.

const chart = new ApexCharts(document.querySelector('#chart'), {
  chart: {
    type: 'bar',
    events: {
      dataPointSelection(e, chartContext, config) {
        // Fires on both mouse click and keyboard Enter/Space
        console.log('Selected:', config.dataPointIndex)
      }
    }
  },
  series: [{ data: [44, 55, 41, 67, 22, 43] }]
})

ApexCharts can swap the chart's color palette for one optimised for a specific type of color vision deficiency. Set theme.accessibility.colorBlindMode to one of the supported values:

Value	Description
`'deuteranopia'`	Red-green deficiency (green-weak) — Wong 2011 palette
`'protanopia'`	Red-green deficiency (red-weak) — IBM design palette
`'tritanopia'`	Blue-yellow deficiency — IBM design palette
`'highContrast'`	High-contrast palette for low vision; also adds the `apexcharts-high-contrast` CSS class to the chart wrapper for additional styling hooks

const chart = new ApexCharts(document.querySelector('#chart'), {
  theme: {
    accessibility: {
      colorBlindMode: 'deuteranopia'   // 'deuteranopia' | 'protanopia' | 'tritanopia' | 'highContrast'
    }
  },
  chart: { type: 'line' },
  series: [
    { name: 'Series A', data: [30, 40, 35, 50] },
    { name: 'Series B', data: [20, 25, 28, 35] }
  ]
})

The colorBlindMode palette replaces the default series colors. It does not affect colors you set explicitly on individual series via series.color.

When colorBlindMode is set to 'highContrast', the class apexcharts-high-contrast is added to the chart wrapper element. You can use this as a hook to apply additional contrast-enhancing styles in your own CSS:

/* Extra contrast styles for high-contrast mode */
.apexcharts-high-contrast .apexcharts-gridline {
  stroke: #000;
}
.apexcharts-high-contrast .apexcharts-xaxis-label,
.apexcharts-high-contrast .apexcharts-yaxis-label {
  fill: #000;
  font-weight: 700;
}

Accessibility

Default Behaviour

Tree-Shaken Bundles

Keyboard Shortcuts

Configuration

Disabling Keyboard Navigation

Wrap-Around Navigation

ARIA Support

Styling the Focused Element

How Navigation Works Per Chart Type

Zoom-Aware Navigation

Firing Click Events via Keyboard

Color Blind Modes