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 All Florida Agencies',
style: {
color: '#FFFFFF'
},
x: -20 //center,
},
xAxis: {
title: {
text: 'Year',
style: {
color: '#FFFFFF'
},
},
categories: ['1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010', '2011','2012','2013'],
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: 'right',
verticalAlign: 'middle',
borderWidth: 0,
color: '#000000',
...