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: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
var chart;
var hoveredColumn;
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: ''
},
xAxis: {
categories: [
'Jan<',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
lineColor: '#000000',
labels: {
rotation: -90,
align: 'right',
style: {
color: '#000000'
}
},
tickColor: '#000000'
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'yAxis',
style: {
color: '#000000',
fontWeight: 'normal'
}
},
lineWidth: 1,
lineColor: '#000000',
labels: {
style: {
color: '#000000'
}
},
minorTickInterval: 25,
minorTickColor: '#000000',
minorTickWidth: 1,
minorTickLength: 5
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: '#FFFFFF',
itemStyle: {
color: '#000000',
...