JSFiddle - React, Tailwind, and code Playground
by Ramkumar Pillai
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="chartMain_container" style="height: 500px; min-width: 500px"></div>
JavaScript
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
var chartMain;
$(document).ready(function () {
chartMain = new Highcharts.Chart({
chart: {
renderTo: 'chartMain_container',
alignTicks: true,
borderWidth: 0,
height: 500,
resetZoomButton: {
position: {
align: 'right',
verticalAlign: 'top'
}
},
shadow: true,
spacingTop: 10,
spacingRight: 20,
spacingBottom: 50,
spacingLeft: 20,
width: 565,
zoomType: 'x'
},
credits: {
enabled: false
},
legend: {
align: 'center',
enabled: true,
itemStyle: {
fontSize: '9px',
width: '175px'
},
layout: 'horizontal',
verticalAlign: 'bottom'
},
plotOptions: {
series: {
shadow: true
},
spline: {
marker: {
enabled: false
}
}
},
subtitle: {
align: 'center',
text: 'Labor Market Statistics, Quarterly Census of Employment and Wages Program',
style: {
fontSize: '9px',
width: '550px'
},
verticalAlign: 'bottom'
},
title: {
text: ''
},
tooltip: {
formatter: function () {
var s = '<b>';
if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
s = s + "Q1"
};
if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
s = s + "Q2"
};
if (Highcharts.dateFormat('%b',...