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: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
backgroundColor: '#018bac',
type: 'line'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: 'Total Positions in Florida Department of Environmental Protection',
style: {
color: '#FFFFFF'
},
x: -20 //center,
},
xAxis: {
title: {
text: 'Year <br></br> <i>*numbers for 2014 are estimated</i>',
style: {
color: '#FFFFFF'
},
},
categories: ['1999-00','2000-01','2001-02','2002-03','2003-04','2004-05','2005-06','2006-07','2007-08','2008-09','2009-10','2010-11','2011-12','2012-13', '2013-14'],
labels: {
style: {
color: '#FFFFFF'
},
},
},
yAxis: {
labels: {
style: {
color: '#FFFFFF'
},
},
lineColor: '#FFFFF',
lineWidth: 1,
title: {
text: 'Dollars',
style: {
color: '#FFFFFF'
},
},
plotLines: [{
value: 0,
width: 1,
color: '#FFFFF',
}]
},
tooltip: {
valueSuffix: '',
backgroundColor: '#FFFFFF',
style: {
color: '#018bac',
fontSize: '12px',
padding: '8px'
}
},
legend: {
layout: 'vertical',
align:...