Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

var yAxis = []
var value = [{
  name: 'Group 1',
  data: [86.77, 75.17, 63.81, 53.83, 22.97, 21.35, 12.99, 2.09]
}, {
  name: 'Group 2',
  data: [88.09, 81.39, 63.52, 57.32, 22.58, 22.33, 12.41, 1.99]
}, {
  name: 'Group 3',
  data: [88.71, 78.49, 61.83, 53.76, 20.43, 30.65, 13.44, .54]
}]


$.each(value, function(i, val) {
  yAxis.push({
    title: {
      text: ''
    },
    left: (i * (100 / value.length)) + '%'
  })
}) 

var chart = Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },

    plotOptions: {
       series: {
        stickyTracking: false,
        followPointer: false,
        cursor: 'pointer',
        pointWidth: 20,
        dataLabels: {
          enabled: true,
          inside: true,
       
          style: {
            verticalAlign: 'middle'
          }
        },
        stacking: true
      },
     
    },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
      yAxis: {
      useHTML: true,
       stackLabels: {
        style: {
          textShadow: false
        },
        enabled: true,
         formatter:function() {
          
          return this.total ;
           
        } 
      },
    },
   yAxis: yAxis.map(function(axis) { // common options
    axis.width = '33%';
    axis.gridLineWidth = 0;
    axis.offset = 100;
    axis.opposite = true;
    axis.labels = {
      enabled: false
    }
  
    axis.title = {
      style: {
        fontSize: "15px"
      }
    };
    return axis;
  }), 
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1],
    yAxis: 0
  }, {
    data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5],
    yAxis: 0
  },
   {
    data: [599, 756, 515, 346, 398, 518, 339, 3190, 402, 290],
    yAxis: 1
  } 
  ],

});