JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="test" style='width:700px'></div>
JavaScript
$(document).ready(function(){
var yAxisSeries = [9.2,7.6,9.6,4.7,9.6,{y:54.4, fillColor:'#FF0000'}];
var xAxisCategories = ['speech1','speech2','speech3','speech4','speech5','speech6'];
// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.pointer = function (x, y, w, h) {
return ['M', x, y,
'C',x,y-h,x+w,y-h,x+w,y,
'C',x+w,y+h,x,y+h,x,y,
'z'];
};
if (Highcharts.VMLRenderer) {
Highcharts.VMLRenderer.prototype.symbols.pointer = Highcharts.SVGRenderer.prototype.symbols.pointer;
}
var chartOptions = {
chart: {
},
plotOptions: {
series: {
pointWidth: 20
},
column: {
pointPlacement: 'on',
clip :false,
pointWidth :'30'
}
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: [{
gridLineWidth: 2,
lineColor: '#000',
tickColor: '#000',
gridLineDashStyle:'ShortDash',
categories:xAxisCategories,
gridLineColor:'#000',
tickmarkPlacement:'on'
}],
yAxis: [{ // Primary yAxis
gridLineWidth: 1,
allowDecimals : true,
gridLineDashStyle:'ShortDash',
gridLineColor:'#9ACD9D',
labels: {
style: {
color: '#9ACD9D'
}
},
}],
...