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/series-label.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>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">Line chart demonstrating some accessibility features of Highcharts. The chart displays the most commonly used screen readers in surveys taken by WebAIM from December 2010 to September 2019. JAWS was the most used screen reader until 2019, when NVDA took over. VoiceOver is the third most used screen reader, followed by Narrator. ZoomText/Fusion had a surge in 2015, but usage is otherwise low. The overall use of other screen readers has declined drastically the past few years.</p>
</figure>

CSS

#container {
    height: 420px; 
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 360px; 
    max-width: 820px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

var colors = Highcharts.getOptions().colors;

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },

    legend: {
        symbolWidth: 40
    },

    title: {
        text: 'Most common desktop screen readers'
    },

    subtitle: {
        text: 'Source: WebAIM. Click on points to visit official screen reader website'
    },

    yAxis: {
        title: {
            text: 'Percentage usage'
        }
    },

    xAxis: {
        title: {
            text: 'Time'
        },
        accessibility: {
            description: 'Time from December 2010 to September 2019'
        },
        categories: ['December 2010', 'May 2012', 'January 2014', 'July 2015', 'October 2017', 'September 2019']
    },

    tooltip: {
        valueSuffix: '%'
    },

    plotOptions: {
        series: {
            point: {
                events: {
                    click: function () {
                        window.location.href = this.series.options.website;
                    }
                }
            },
            cursor: 'pointer'
        }
    },

    series: [
    
        {
            name: 'Complete Provision',
            marker: {
	            enabled: false
            },
            data: [{
    "x": 1600473600000,
    "y": 0
  },
  {
    "x": 1600473600000,
    "y": 2
  },
  {
    "x": 1600560000000,
    "y": 0
  },
  {
    "x": 1600560000000,
    "y": 2
  },
  {
    "x": 1600646400000,
    "y": 0
  },
  {
    "x": 1600646400000,
    "y": 6
  },
  {
    "x": 1600732800000,
    "y": 0
  },
  {
    "x": 1600732800000,
    "y": 3
  },
  {
    "x": 1600819200000,
    "y": 0
  },
  {
    "x": 1600819200000,
    "y": 11
  },
  {
    "x": 1600905600000,
    "y": 0
  },
  {
    "x": 1600905600000,
    "y": 8
  },
  {
    "x": 1600992000000,
    "y": 0
  },
  {
    "x": 1600992000000,
    "y": 8
  },
  {
    "x": 1601078400000,
    "y": 0
  },
  {
    "x": 1601078400000,
    "y": 3
  },
  {
    "x": 1601164800000,
    "y": 0
  },
  {
    "x":...