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
$(function () {
var chart;
$(document).ready(function() {
document.title = "Highcharts " + Highcharts.version;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
spacingBottom: 30,
plotBorderWidth: 1,
plotBorderColor: '#3F4044',
},
title: {
text: 'Web browsers statistics accessing www.w3schools.com',
},
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
}
},
legend: {
enabled: false
},
credits: {
position: {
align: 'left',
x: 20,
y: -7
},
text: 'Joe Kuan',
href: 'http://joekuan.wordpress.com'
},
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,...