JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  (function(Highcharts) {
    Highcharts.Renderer.prototype.symbols.callout = function(x, y, w, h, options) {
      var arrowLength = 6,
        halfDistance = 6,
        r = Math.min((options && options.r) || 0, w, h),
        safeDistance = r + halfDistance,
        anchorX = options && options.anchorX,
        anchorY = options && options.anchorY,
        path;

      path = [
        'M', x + r, y,
        'L', x + w - r, y, // top side
        'C', x + w, y, x + w, y, x + w, y + r, // top-right corner
        'L', x + w, y + h - r, // right side
        'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-right corner
        'L', x + r, y + h, // bottom side
        'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner
        'L', x, y + r, // left side
        'C', x, y, x, y, x + r, y // top-right corner
      ];

      //bottom arrow
      path.splice(23, 3,
        'L', w / 2 + halfDistance, y + h,
        w / 2, y + h + arrowLength,
        w / 2 - halfDistance, y + h,
        x + r, y + h
      );
      return path;
    };
  }(Highcharts));

  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    yAxis: {
      stackLabels: {
        enabled: true
      }
    },
    tooltip: {
      shared: true,
      positioner: function(labelWidth, labelHeight, point) {
        return {
          x: point.plotX + labelWidth / 2,
          y: point.plotY - labelHeight / 2
        }
      },
      formatter: function() {
        return "serie 1 : 5<br>serie 2 : 2<br>serie 3 : 3"
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    series: [{
      data: [5]
    }, {
      data: [2]
    }, {
      data: [3]
    }]
  });
});