JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<script src="http://code.highcharts.com/3.0.10/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    
    var mathRound = Math.round;
    
    (function (H) {
        H.wrap(H.Series.prototype, 'alignDataLabel', function (proceed,point, dataLabel, options, alignTo, isNew) {

                var chart = this.chart,
                    inverted = chart.inverted,
                    plotX = H.pick(point.plotX, 0),
                    plotY = H.pick(point.plotY, 0),
                    bBox = dataLabel.getBBox(),
                    // Math.round for rounding errors (#2683), alignTo to allow column labels (#2700)
                    visible = this.visible && (point.series.forceDL || chart.isInsidePlot(plotX, mathRound(plotY), inverted) || (alignTo && chart.isInsidePlot(plotX, inverted ? alignTo.x + 1 : alignTo.y + alignTo.height - 1, inverted))),
                    alignAttr; // the final position;

                if (visible) {

                    // The alignment box is a singular point
                    alignTo = H.extend({
                        x: inverted ? chart.plotWidth - plotY : plotX,
                        y: mathRound(inverted ? chart.plotHeight - plotX : plotY),
                        width: 0,
                        height: 0
                    }, alignTo);

                    // Add the text size for alignment calculation
                    H.extend(options, {
                        width: bBox.width,
                        height: bBox.height
                    });

                    // Allow a hook for changing alignment in the last moment, then do the alignment
                    if (options.rotation) { // Fancy box alignment isn't supported for rotated text
                        alignAttr = {
                            align: options.align,
                            x: alignTo.x + options.x + alignTo.width / 2,
                            y: alignTo.y + options.y + alignTo.height / 2
                        };
                        dataLabel[isNew ? 'attr' : 'animate'](alignAttr);
                    }...