| name | highcharts-1-enable-accessibility |
| description | Sub-skill of highcharts: 1. Enable Accessibility (+3). |
| version | 1.0.0 |
| category | data-visualization |
| type | reference |
| scripts_exempt | true |
1. Enable Accessibility (+3)
1. Enable Accessibility
Highcharts.chart('container', {
accessibility: {
enabled: true,
description: 'Chart showing sales trends over time',
keyboardNavigation: {
enabled: true
}
},
});
2. Customize Tooltips
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y.toFixed(2);
}
}
3. Use Responsive Options
Highcharts.chart('container', {
chart: {
height: (9 / 16 * 100) + '%'
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
}
}
}]
}
});
4. Export Functionality
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: [
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'separator',
'downloadCSV',
'downloadXLS'
]
}
}
}