Highcharts Demo

author(s): Øystein Moseng

by oysteinmoseng

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>

<input type="text" value="focus"/>
<div id="container"></div>

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

/*
    This is an advanced demo showing how to create custom accessibility
    functionality for a chart. This allows us to add elements to the
    keyboard navigation, as well as perform accessibility related tasks
    whenever updates are made to the chart.
*/

// Create a basic chart
const chart = Highcharts.chart('container', {
    xAxis: {
        categories: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
            'Oct', 'Nov', 'Dec'
        ]
    },

    series: [{
        data: [
            29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
            148.5, 216.4, 194.1, 95.6, 54.4
        ]
    }]
});


// Add a custom button. We add this to the chart, and store it in our own
// namespace to avoid conflicts with other chart properties.
chart.myNamespace = {};
chart.myNamespace.myButton = chart.renderer.button(
    'Custom button', 60, 10, function () {
        alert('Custom Button Pressed');
    }
).add();


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

    // Perform tasks to be done when the chart is updated
    onChartUpdate: function () {
        // Get our button if it exists, and set attributes on it
        const namespace = this.chart.myNamespace || {};
        if (namespace.myButton) {
            namespace.myButton.attr({
                role: 'button',
                tabindex: -1
            });
            Highcharts.A11yChartUtilities.unhideChartElementFromAT(
                this.chart, namespace.myButton.element
            );
        }
    },

    // Define keyboard navigation for this component
    getKeyboardNavigation: function () {
        const keys = this.keyCodes,
           ...