JSFiddle - React, Tailwind, and code Playground
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: 350px; height: 600px; margin: 0 auto"></div>
JavaScript
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Premier League Finishes by Team',
x: -20 //center
},
subtitle: {
text: 'Source: http://www.premierleague.com/ | Patchstats™',
x: -20
},
xAxis: {
categories: ['1993', '1994','1995' ,'1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'],
title: {
text: 'Years'
}
},
yAxis: {
title: {
text: 'Points'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
plotBands: [{ // UEFA Champions Legaue
from: 0,
to: 4,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'UEFA Champions Legaue',
style: {
color: '#606060'
}
}
}, { // Europa League Cup
from: 4,
to: 5,
color: 'rgba(150, 170, 213, 0.1)',
label: {
text: 'Europa League Cup',
style: {
color: '#606060'
}
}
}, { // Relegation
from: 18,
to: 22,
color: 'rgba(150, 170, 213, 0.1)',
label: {
text: 'Relegation',
...