JSFiddle - React, Tailwind, and code Playground
by Mike Zavarello
HTML
<!--<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="cagr2" style=""></div>
JavaScript
$(function () {
$('#cagr2').highcharts({
chart: {
type: 'column',
spacingBottom: -7,
spacingTop:20
},
title: {
text: ''
}, exporting: { enabled: false },
credits: {
enabled: false
},
xAxis: {
lineColor: 'transparent',
categories: ['']
},
yAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'center',
//x: -10,
verticalAlign: 'top',
y: -5,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#ffffff',
borderWidth: 1,
shadow: true
},
tooltip: {
headerFormat: '<b>{point.x}</b>',
pointFormat: '{series.name}: {point.y}',
valueSuffix: ' %'
},
plotOptions: {
series: {
animation: {
duration: 7000
}
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize:...