JSFiddle - React, Tailwind, and code Playground
by AbhishekRohan
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
Highcharts.setOptions({
lang : {
thousandsSep : ','
}
});
Highcharts.Axis.prototype.init = ( function(func) {
return function(chart, userOptions) {
func.apply(this, arguments);
if (this.categories) {
this.userCategories = this.categories;
this.categories = undefined;
this.labelFormatter = function() {
this.axis.options.labels.align = (this.value == this.axis.min) ? "left" : ((this.value == this.axis.max) ? "right" : "center");
return this.axis.userCategories[this.value];
};
}
};
}(Highcharts.Axis.prototype.init));
/* var graphDataXaxis = JSON.parse(graphDataXaxis);
var graphDataYaxis = JSON.parse(graphDataYaxis);
var osname = JSON.parse(osname);
var fromController = from ? JSON.parse(from) : ""; */
Highcharts.setOptions({
colors : ["#57E7CE", "#57E7CE", "#57E7CE"]
});
Highcharts.chart('container', {
chart : {
type : 'column',
renderTo : 'container',
backgroundColor : 'transparent',
height : ((osname == "iPhoneX")?'890':(osname == "ios") ? '900' : ((osname == "iosPlus") ? '830' : '800')),
},
navigation : {
buttonOptions : {
enabled : false
}
},
title : {
text : ''
},
xAxis : {
categories : ['AMER', 'EMEA', 'APAC'],
labels : {
align:'center',
style : {
color : '#555555',
fontSize : "25px",
fontWeight : 'normal',
textOverflow : 'none',
whiteSpace : 'nowrap'
}
}
},
yAxis : {
labels : {
style : {
color : '#555555',
fontSize : '25px',
fontWeight : 'normal',
textOverflow : 'none',
whiteSpace : 'nowrap',
},
/* formatter : function() {
return formatNumberY(this.value, "$");
} */
},
title:{
text:''
}
},
legend :...