JSFiddle - React, Tailwind, and code Playground
by JoeKuan
HTML
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>
<body>
<div id="container"></div>
</body>
JavaScript
$(function () {
var chart;
$(document).ready(function() {
document.title = "Highcharts " + Highcharts.version;
var pTxt = null;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBorderWidth: 1,
plotBorderColor: '#3F4044',
borderColor: '#a1a1a1',
borderWidth: 2,
borderRadius: 3,
events: {
drilldown: function(event) {
var point = event.point;
var chart = point.series.chart;
var renderer = chart.renderer;
if (point.name == 'Internet Explorer') {
pTxt = renderer.text('9%',
(chart.plotWidth / 2) + chart.plotLeft - 43,
(chart.plotHeight / 2) + chart.plotTop + 25).
css({
fontSize: '45px',
fontStyle: 'italic',
color: 'blue'
}).add();
}
},
drillup: function() {
pTxt && (pTxt = pTxt.destroy());
}
}
},
title: {
text: 'Web browsers statistics access www.w3school.com - 2013',
},
credits: {
text: 'www.w3school.com'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Percentage %'
},
min: 0
},
legend: {
enabled: false
...