JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<div id="container" style="margin: 0 auto"></div>
JavaScript
$(function () {//Bar chart
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: { cx: 0.5, cy: 0.5, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
plotOption :{series :{animation:false}},
chart:{
type:'column',
options3d: {
enabled: true,
alpha:4,
beta:1,
depth:22
},
height:450,
width:500,
backgroundColor: '#FCFFC5',
borderWidth: 4,
borderRadius:2,
//plotBorderWidth: 1,
plotBorderColor: '#346691',
plotShadow: true,
plotBackgroundColor: '#eeeeee',
plotBorderRadius:4,
inverted:false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
legend:{
enabled:true,
layout:'horizontal',
verticalAlign:'bottom',
borderWidth:0,
backgroundColor: '#bad8eb',
borderWidth: 4,
borderRadius:2
},
tooltip: {
enabled:true,
pointFormat: '{series.name}: <i>{point.y}</i>',
borderWidth:1,
borderRadius:2,
backgroundColor:'#b6fcd5'
},
xAxis: {
type:'category',
title:{
text:'Months'
},
labels:{
staggerLines: 3,
enabled:true,
style: {
color: '#0000FF'
},
...