JSFiddle - React, Tailwind, and code Playground
by AbhishekRohan
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
Highcharts.chart('container', {
chart: {
type: 'column',
renderTo: 'container',
backgroundColor: 'transparent',
marginTop: 90
},
navigation: {
buttonOptions: {
enabled: false
}
},
title: {
text: ''
},
xAxis: {
categories: ['Jul', 'Aug', 'Sep', 'Nov', 'Dec'],
labels: {
align: 'center',
style: {
color: '#555555',
fontSize: "9px",
fontWeight: 'normal',
textOverflow: 'none',
whiteSpace: 'nowrap'
}
}
},
yAxis: {
labels: {
style: {
color: '#555555',
fontSize: '9px',
fontWeight: 'normal',
textOverflow: 'none',
whiteSpace: 'nowrap',
},
/* formatter : function() {
return formatNumberY(this.value, "$");
} */
},
gridLineWidth: 0,
plotLines: [{
color: '#555555', // Color value
dashStyle: 'dash', // Style of the plot line. Default to solid
value: 80, // Value of where the line will appear
width: 2, // Width of the line
label: {
text: 'Target 80 Days',
}
}],
title: {
text: ''
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
// shared : true,
// padding : 8,
// itemStyle : {
// fontSize : "25px",
// }
enabled: false
},
plotOptions: {
series: { enableMouseTracking: false },
column: {
grouping: false,
shadow: false,
borderWidth: 0,
pointPadding: 0,
//...