JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container"></div>
<!-- Works not: -->
<!-- script type="text/javascript" src="http://highcharts.com/js/testing-exporting.js"></script -->
<!-- Works: -->
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://github.com/davidpadbury/highcharts.com/raw/master/js/modules/exporting.src.js"></script>
JavaScript
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'overzichtontwikkelingsgebied',
defaultSeriesType: 'column'
},
title: {
text: 'Overzicht Ontwikkelingsgebied'
},
subtitle: {
text: 'Kindnaam - Periode: '
},
xAxis: {
categories: [
'Onvoldoende', 'Matig', 'Gemiddeld',
'Voldoende',
'Ruim voldoende'
]
},
yAxis: {
min: 0,
title: {
text: 'Procenten (%)'
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +'%';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Totaal Kindoverzicht',
data: [49.9, 14.3, 25.3, 19.3, 10.3]
}]
});
});