Highcharts Demo

author(s): Torstein Hønsi

by ewolden

HTML

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

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

JavaScript

(function (H) {
    H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
      let seriesIndex = this.index
        $.each(this.points, function (i,point) {
        	point.shapeArgs.y -= seriesIndex == 0 ? 0 : 5;
          point.shapeArgs.height +=  5;
        });
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
}(Highcharts));

Highcharts.chart('container', {
  chart: {
    type: 'column',
    spacingBottom: 0
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    offset: 7,
    lineWidth: 0,
    tickLength: 0
  },
  yAxis: {
    min: 0,
    title: {
      text: ''
    },
    stackLabels: {
      enabled: false,
      style: {
        fontWeight: 'bold',
        color: 'gray'
      }
    },
    visible: false
  },
  legend: {
    align: 'center',

    verticalAlign: 'bottom',

  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    series: {

    },
    column: {
      stacking: 'normal',
      borderWidth: 0,
      borderRadius: 5,
      dataLabels: {
        enabled: true,
        color: 'white'
      }
    }
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],

  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
  }]
});