JSFiddle - React, Tailwind, and code Playground
by dgrebb
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: null
},
xAxis:{
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May'
],
labels: {
style: {
fontSize: 14
}
}
},
yAxis: {
title: {
enabled: false
},
labels: {
enabled: false
}
},
legend: {
layout: 'vertical',
floating: false,
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
animation: false,
dataLabels: {
enabled: true,
inside: false,
rotation: 270,
align: 'left',
y: -5,
style: {
fontSize: 12,
color: 'black'
}
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, null, 144.0]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0]
}]
},function(chart){
chart.series[1].points[0].graphic.translate(40,0);
});
});