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
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: {
linearGradient: [0,0,0,400],
stops: [
[0, 'rgb(246,246,246)'],
[1, 'rgb(223,223,223)']
]
},
},
title: {
text:''
},
legend:{ enabled:'true',
padding:4.5
},
exporting: {
buttons: {
exportButton: {
enabled:false
},
printButton: {
enabled:false
}
}
},
xAxis: {
max:2,
color:'#fb9817',
categories: ['<a href="http://www.google.co.in">Service</a>','Product','Process']
},
yAxis: {
min:0,
title: {
text: ''
}
},
plotOptions: {
bar: {
backgroundColor: {
linearGradient: [0, 0, 0, 400],
stops: [
[0, 'rgb(246,246,246)'],
[1, 'rgb(223,223,223)']
]
},
allowPointSelect: true,
pointHeight:52,
cursor: 'pointer',
},
series: {
stacking: 'normal',
borderRadius:3,
plotBackgroundImage:'Images/2.png'
}
},
series: [{
name: 'Neutral',
color:'#fb9817',
data: [7,32,38]
},
{
...