Highcharts Demo

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<input value="Click me to focus">
<div id="container" style="height: 400px; width: 500px"></div>
<input value="After chart">

JavaScript

$(function() {
  var categoryLinks = {
    'Foo': 'http://www.google.com/search?q=foo',
    'Bar': 'http://www.google.com/search?q=foo+bar',
    'Foobar': 'http://www.google.com/search?q=foobar',
    'Oof': 'http://www.google.com/search?q=oof',
    'Rab': 'http://www.google.com/search?q=oof+rab',
    'Raboof': 'http://www.google.com/search?q=raboof'
  };

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container'
    },
    xAxis: [{
      categories: ['Foo', 'Bar', 'Foobar'],

      labels: {
        formatter: function() {
          return '<a href="' + categoryLinks[this.value] + '">' +
            this.value + '</a>';
        },
        useHTML: true
      }
    }, {
      categories: ['Oof', 'Rab', 'Raboof'],

      labels: {
        formatter: function() {
          return '<a href="' + categoryLinks[this.value] + '">' +
            this.value + '</a>';
        },
        useHTML: true
      },
      linkedTo: 0
    }],

    series: [{
      data: [29.9, 71.5, 106.4]
    }]
  });

  // Create the custom accessibility component for the chart. This class inherits
  // from the AccessibilityComponent class.
  var CustomAxisLabelsComponent = function(chart) {
    this.initBase(chart);
  };
  CustomAxisLabelsComponent.prototype = new Highcharts.AccessibilityComponent();
  Highcharts.extend(CustomAxisLabelsComponent.prototype, {

    updateProxies: function() {
      this.proxyProvider.removeGroup('axislabels');
      this.proxyProvider.addGroup('axislabels');
      this.linkProxies = [];
      this.chart.xAxis.forEach(axis => {
        Object.keys(axis.ticks).forEach(tickId => {
          var tick = axis.ticks[tickId];
          var link = tick.label && tick.label.element && tick.label.element.firstChild;
          if (link) {
            var proxyElement = this.proxyProvider.addProxyElement(
              'axislabels', {
                click: link
              }, 'button', {
                'aria-label': link.textContent,
               ...