MAIDR JavaScript API
    Preparing search index...
    • Binds MAIDR to an ApexCharts chart and keeps it bound.

      Waits until the chart has finished drawing — render() resolved and the entry animation over, or at once with animations disabled — converts it with apexchartsToMaidr, writes the result to the maidr-data attribute of the chart's container (chart.el) and dispatches maidr:bindchart, which maidr.js answers by mounting MAIDR on the container. Whenever ApexCharts redraws the chart afterwards — a resize, updateSeries, updateOptions, a legend toggle — it converts the chart again and hands the result to the mounted instance through window.maidrLive.setData, so the highlight keeps following the chart and a reader inside it keeps their focus and their place.

      The data is bound with live: true, which is what lets MAIDR apply a redraw while the reader is in the chart. It also makes MAIDR's monitor mode (M) available, although a redraw replaces the data rather than appending to it, so monitor mode has nothing to announce.

      While MAIDR is mounted, a chart with a percentage width (ApexCharts' default) whose container is auto or percentage wide has the container's width set in pixels from the space MAIDR's figure gives it, and kept there as the page resizes: MAIDR's tab stop is sized to its content, which would otherwise hold the chart at the width it was first drawn at. dispose() puts the container's width back.

      Call it right after chart.render(); it does not need render() to have resolved. maidr.js must be on the page for the chart to become interactive; without it, ready still resolves with the data.

      Parameters

      Returns ApexChartsBinding

      The binding: ready resolves with the first MAIDR data bound, and dispose() stops following the chart and takes MAIDR off it

      const chart = new ApexCharts(el, {
      chart: { type: 'line', accessibility: { enabled: false } },
      series: [{ name: 'Sales', data: [3, 5, 4] }],
      xaxis: { categories: ['Jan', 'Feb', 'Mar'] },
      });
      chart.render();
      const binding = maidrApexCharts.bindApexCharts(chart, { title: 'Sales' });