Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

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

<div id="container"></div>

JavaScript

(function(H) {
  H.wrap(H.Axis.prototype, 'setAxisSize', function(proceed) {
    // Run original proceed method
    proceed.apply(this, [].slice.call(arguments, 1));

    var chart = this.chart,
      options = this.options,
      width = options.widthPerc,
      left = options.leftPerc;
       

    // Check for percentage based input values
    if (width) {
     
      width = parseFloat(width) / 100 * chart.plotWidth;
      this.width = width;
      options.width = width;
    }

    if (left) {
      left = parseFloat(left) / 100 * chart.plotWidth + chart.plotLeft;
      this.left = left;
      options.left = left;
    }
  });
}(Highcharts));

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  xAxis: [{
    title: {
      text: 'Date tagged'
    },
    categories: [
      'December',
      'November',
      'October',
      'September',
      'August',
      'July',
      'June',
      'May',
      'April',
      'March',
      'February',
      'January'
    ],
    gridLineWidth: 1,
    tickWidth: 0
  }],
  yAxis: [{
    title: {
      text: ''
    },
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    leftPerc: '0%',
    widthPerc: '30%',
    offset: 0
  }, {
    title: {
      text: ''
    },
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    leftPerc: '35%',
    widthPerc: '30%',
    offset: 0
  }, {
    title: {
      text: ''
    },
    labels: {
      enabled: false
    },
    gridLineWidth: 0,
    leftPerc: '70%',
    widthPerc: '30%',
    offset: 0
  }],
   plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        },
        stacking: 'normal'
      }
    },
  series: [ {
            data: [29.9, 71.5, 106.4, 129.2, 144.0],
            stack: 0
        }, {
            data: [30, 176.0, 135.6, 148.5, 216.4],
            stack: 0
        // second stack
        }, {
            data: [106.4, 129.2, 144.0, 29.9,...