Highcharts Demo

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">The following chart demonstrates a chart that animates quickly and is hidden from a screen reader.
        If you pause the data, the Accessibility module is enabled and you are able to explore the data.</p>
</figure>
<button id="toggle">Start animating</button>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

caption {
    padding-bottom: 15px;
    font-family: Verdana, sans-serif;
    font-size: 1.2em;
    color: #555;
}

table {
    font-family: Verdana, sans-serif;
    font-size: 12pt;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
}

table tr:nth-child(odd) {
    background-color: #fff;
}

table tr:nth-child(even) {
    background-color: #fcf9f9;
}

th {
    font-weight: 600;
    padding: 10px;
}

JavaScript

const Accessibility = Highcharts._modules['Accessibility/Accessibility.js'];
Highcharts.Chart.prototype.updateA11yEnabled = function() {
  let a11y = this.accessibility;
  const accessibilityOptions = this.options.accessibility,
    svg = this.renderer.boxWrapper.element;
  if (accessibilityOptions && accessibilityOptions.enabled) {
    if (a11y && !a11y.zombie) {
      a11y.update();
    } else {
      this.accessibility = a11y = new Accessibility(this);
      if (a11y && !a11y.zombie) {
        a11y.update();
      }
      // --- FIX ---
      if (svg.getAttribute('role')) {
      	svg.removeAttribute('role');
      }
    }
  } else if (a11y) {
    // Destroy if after update we have a11y and it is disabled
    if (a11y.destroy) {
      a11y.destroy();
    }
    delete this.accessibility;
  } else {
    // Just hide container
    this.renderTo.setAttribute('aria-hidden', true);
    // --- FIX ---
    if (!svg.getAttribute('role')) {
      svg.setAttribute('role', 'img');
    }
  }
  this.wasAccessibilityEnabled = false;
}

const chart = Highcharts.chart('container', {
  title: {
    text: 'Dynamic data'
  },
  subtitle: {
    text: 'Click button to animate or explore chart'
  },
  accessibility: {
    enabled: true
  },
  tooltip: {
    dateTimeLabelFormats: {
      day: '%H:%M',
      hour: '%H:%M'
    }
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: '%H:%M',
      hour: '%H:%M'
    }
  },
  plotOptions: {
    series: {
      pointStart: 0,
      pointInterval: 1000 * 60 * 60
    }
  },
  series: [{
    name: 'Random data',
    data: [1, 3, 4, 6, 7, 5, 3, 4, 8, 9, 7, 6, 4, 3]
  }]
});

let intervalId;
let isAnimating = false;

const toggleButton = document.getElementById('toggle');
toggleButton.onclick = function() {
  if (isAnimating) {
    clearInterval(intervalId);
    chart.update({
      accessibility: {
        enabled: true
      }
    });
    toggleButton.textContent = 'Start animating';
  } else {
    intervalId =...