JSFiddle - React, Tailwind, and code Playground
by wergeld
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 900px; width: 500px"></div>
JavaScript
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
var chartDist;
$(document).ready(function () {
chartDist = new Highcharts.Chart({
chart: {
renderTo: 'container',
alignTicks: true,
borderWidth: 0,
height: 400,
resetZoomButton: {
position: {
align: 'right',
verticalAlign: 'top'
}
},
shadow: true,
spacingTop: 10,
spacingRight: 20,
spacingBottom: 50,
spacingLeft: 20,
width: 565,
zoomType: 'x'
},
credits: {
enabled: false
},
legend: {
enabled: false,
layout: 'horizontal'
},
plotOptions: {
series: {
shadow: true
},
spline: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
title: {
text: ''
},
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': ';
if (point.series.name == 'Unemployment Rate (%)') {
s += Highcharts.numberFormat(point.y, 2, '.');
} else {
s += Highcharts.numberFormat(point.y, 0, ',');
}
});
return s;
},
shared: true
},
xAxis: {
alternateGridColor: '#FAFAFA',
categories: ['Calhoun County', 'Flagler County', 'Franklin County', 'Gadsden County', 'Hendry County', 'Liberty County', 'Putnam County', 'Union County', 'Highlands County', 'Nassau County', 'Columbia County', 'Charlotte County', 'Madison County', 'Santa Rosa County', 'Sumter County', 'Clay County', 'Monroe County', 'Walton County', 'Bay County', 'Hernando County', 'Martin County', 'Pasco County', 'Marion County', 'St. Johns County', 'Indian River County'],
labels: {
style: {
fontSize: '9px',
...