Highcharts Demo

author(s): Torstein Hønsi

by Sundarapandiyan_pa

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bar',
          events: {
            load(e) {
              self.drawArrows(this);
            },
            redraw(e) {
              self.drawArrows(this);
            }
          }
  },
  title: {
    text: 'Stacked bar chart'
  },
  xAxis: {
    categories: ['Apples']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    }
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'John',
    data: [5,9]
  }, {
    name: 'Jane',
    data: [2,8]
  }, {
    name: 'Joe',
    data: [3,10]
  }]
});

function drawArrows(chart) {
  var container = $('#container');
      const barSections = container.find('.highcharts-series rect');


      const legendTextContainers = container.find('.legend-text-colored');

      for (let index = 0; index < legendTextContainers.length; index++) {
        // for (let index = 0; index < 1; index++) {
        const legendTextBRect = legendTextContainers[
          index
        ].getBoundingClientRect();
        const barSectionBRect = (barSections[index]).getBBox();

        // Endinging position
        const legendX = legendTextBRect.left + legendTextBRect.width / 2;
        const legendY = legendTextBRect.top;

        // Starting position
        const barX = barSectionBRect.x;
        const barWidth = barSectionBRect.width;
        const barSectionX = barX + barWidth;
        const barSectionY = barSectionBRect.y + barWidth * 2; // + barSectionBRect.height;

        const isLeft = legendX > barX ? true : false;

        // Draw a breizer curve to the label
        chart.renderer
          .path({
            d:
              'M' +
              barSectionY +
              ', ' +
              +barSectionX +
              ' Q' +
              barSectionY +
              ', ' +
              legendTextBRect.top +
              ' ' +
              legendTextBRect.left +
              ', ' +
             ...