JSFiddle - React, Tailwind, and code Playground
by JoeKuan
HTML
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="border: 2px solid #a1a1a1; width:350; height: 150; border-radius: 3px; " >
<div id="container"></div>
</div>
</body>
JavaScript
var chart;
$(document).ready(function() {
document.title = "Highcharts " + Highcharts.version;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
plotBorderWidth: 1,
plotBorderColor: '#3F4044',
borderColor: '#a1a1a1',
borderWidth: 2,
borderRadius: 3
},
title: {
text: 'Web browsers statistics',
verticalAlign: 'bottom',
y: -90
},
subtitle: {
text: null
},
xAxis: {
categories: [ 'Jan 2008', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan 2009', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan 2010', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan 2011', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan 2012', 'Feb', 'Mar'
],
tickInterval: 3
},
yAxis: {
title: {
text: 'Percentage %',
},
min: 0
},
plotOptions: {
series: {
lineWidth: 2
}
},
series: [{
name: 'Internet Explorer',
data: [54.7, 54.7, 53.9, 54.8, 54.4, 54.2, 52.4, 51.0, 49.0, 47.4, 47.0, 46,
44.8, 43.6, 43.3, 42.1, 41.0, 40.7, 39.4, 39.3, 39.6, 37.5, 37.7, 37.2,
36.2, 35.3, 34.9, 33.4, 32.2, 31.0, 30.4, 30.7, 31.1, 29.7, 28.6, 27.5,
26.6, 26.5, 25.8, 24.3, 24.9, 23.2, 22.0, 22.4, 22.9, 21.7, 21.2, 20.2,
...