JSFiddle - React, Tailwind, and code Playground
by Kesav Telaprolu
HTML
<script src="http://github.com/highslide-software/highcharts.com/raw/resizing/js/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
JavaScript
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
margin: [ 20, 20, 50, 50]
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
gridLineColor: '#e6e6e6',
gridLineWidth: 1,
lineWidth: 1,
categories: '',
lineColor: '#e7e7e7',
type:'linear',
labels: {
align: 'center'
},
tickLength: 1,
tickWidth: 1,
tickPosition: 'inside'
},
yAxis: {
min: -20,
max: 20,
tickInterval: 5,
labels: {
style: {
color: '#000000',
font: 'bold 9px Arial'
}
},
title: {
text: '%',
rotation: 0,
align: 'high',
margin: 5,
style: {
color: '#000000',
font: 'bold 10px Arial',
paddingBottom: '10px'
}
},
gridLineColor: '#e6e6e6',
lineColor: '#e7e7e7',
lineWidth: 1,
maxPadding: 0.05,
endOnTick: true
},
legend: {
enabled: false
},
plotOptions: {
column: {
borderRadius: 7,
color: '#a3b315',
shadow: false,
enableMouseTracking: false,
groupPadding: 0,
pointWidth: 72,
pointPadding: 0
...