JSFiddle - React, Tailwind, and code Playground
by maritavindedal
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.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>
<div id="container"></div>
JavaScript
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Accessible drilldown'
},
subtitle: {
text: 'Click points to drill down to more detailed data'
},
series: [{
name: 'Browsers',
colorByPoint: true,
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.name}, {point.y}. ' +
'Clickable.'
}
},
data: [
{
name: 'Chrome',
y: 62.74,
drilldown: 'Chrome'
},
{
name: 'Firefox',
y: 10.57,
drilldown: 'Firefox'
},
{
name: 'Internet Explorer',
y: 7.23,
drilldown: 'Internet Explorer'
},
{
name: 'Safari',
y: 5.58,
drilldown: 'Safari'
},
{
name: 'Edge',
y: 4.02,
drilldown: 'Edge'
},
{
name: 'Opera',
y: 1.92,
drilldown: 'Opera'
},
{
name: 'Other',
y: 7.62,
drilldown: null
}
]
}],
drilldown: {
breadcrumbs: {
position: {
align: 'right'
}
},
series: [
{
name: 'Chrome',
id: 'Chrome',
data: [
[
'v65.0',
50
],
[
'v64.0',
1.3
],
[
'v63.0',
53.02
],
[
'v62.0',
...