JSFiddle - React, Tailwind, and code Playground
by AbhishekRohan
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
function formatNumberY(n, currency) {
var ranges = [{
divider : 1e18,
suffix : 'P'
}, {
divider : 1e15,
suffix : 'E'
}, {
divider : 1e12,
suffix : 'T'
}, {
divider : 1e9,
suffix : 'B'
}, {
divider : 1e6,
suffix : 'M'
}, {
divider : 1e3,
suffix : 'K'
}];
for (var i = 0; i < ranges.length; i++) {
if (n >= ranges[i].divider) {
if (n < 1000000000) {
return currency + (n / ranges[i].divider).toFixed(0) + ranges[i].suffix;
} else {
return currency + (n / ranges[i].divider).toFixed(1) + ranges[i].suffix;
}
}
}
return currency + n.toString();
}
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));
$(function() {
'use strict';
(function(factory) {
if(typeof module === 'object' && module.exports) {
module.exports = factory;
} else {
factory(Highcharts);
}
}(function(Highcharts) {
(function(H) {
H.wrap(H.seriesTypes.column.prototype, 'translate', function(proceed) {
const options = this.options;
const topMargin = options.topMargin || 0;
const bottomMargin = options.bottomMargin || 0;
proceed.call(this);
H.each(this.points, function(point) {
if(options.borderRadiusTopLeft || options.borderRadiusTopRight || options.borderRadiusBottomRight || options.borderRadiusBottomLeft) {
const w = point.shapeArgs.width;
const h = point.shapeArgs.height;
const x =...