JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.0.1/highcharts.js"></script>

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

JavaScript

arr = [599, 756, 515, 346, 398, 518, 339, 319, 402, 290]

$(function () {
    $('#container').highcharts({
       chart: {
    type: 'bar',
    marginRight: 100,
  //  spacingLeft: 16,
   //  spacingRight: 30,
    events: {
      render() {
        let chart = this;

        chart.series[0].points.forEach(p => {
          if (p.overallLabel) {
            p.overallLabel.destroy();
          }
           
          let x = chart.plotWidth + chart.plotLeft + 10, // where 10 is a padding,
            y = p.dataLabel.alignAttr.y + chart.plotTop,
            opacity = chart.series[2].visible;
					console.log(x + "sss" + y)
          p.overallLabel = chart.renderer.label(arr[p.index], x, y)
            .attr({
              fill: 'orange',
              padding: 3,
              r: 10,
              opacity: opacity ? 1 : 0
            }).add()
        })
      }
    }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    stackLabels: {
      style: {
        textShadow: false
      },
      enabled: true,
      formatter: function() {

        return this.total + '<div style="float: right !important; " >   ' + arr[this.x] + '</div>';

      }
    },
  },

  plotOptions: {
    series: {
      stickyTracking: false,
      followPointer: false,
      cursor: 'pointer',
      pointWidth: 20,
      dataLabels: {
        enabled: true,
        inside: true,
        style: {
          verticalAlign: 'middle'
        }
      },
      stacking: true
    },

  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
  }, {
    data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5]
  }, {
    name: 'Overall',
    color: 'orange',
  }]
    });
});