Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

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

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

CSS

#container {
  max-width: 800px;
  min-width: 380px;
  margin: 0 auto;
}

JavaScript

(function(H) {
  H.wrap(H.Tick.prototype, 'handleOverflow', function(proceed) {
    //set
    this.axis.currentTick = this;
    // proceed
    proceed.apply(this, [].slice.call(arguments, 1));
    //clear
    this.axis.currentTick = false;
  });

  H.wrap(H.Axis.prototype, 'getSlotWidth', function(proceed) {
    var result,
      series = this.chart.series[0],
      axis = series.xAxis,
      currentTick = axis.currentTick || {},
      relZ = series.relZ,
      i = currentTick.pos || 0,
      len = axis.len,
      totalZ = series.totalZ,
      linearSlotLeft = i / relZ.length * len,
      linearSlotRight = (i + 1) / relZ.length * len,
      slotLeft = (H.pick(relZ[i], totalZ) / totalZ) * len,
      slotRight = (H.pick(relZ[i + 1], totalZ) / totalZ) * len,
      xInsideLinearSlot = currentTick.xOrig - linearSlotLeft,
      ret;

    if (currentTick) {
      result = slotRight - slotLeft;
      console.log(result);
    } else {
      result = proceed.apply(this, [].slice.call(arguments, 1));
    }

    return result;
  });
}(Highcharts))


Highcharts.chart('container', {

  chart: {
    type: 'variwide'
  },

  title: {
    text: 'Labor Costs in Europe, 2016'
  },

  subtitle: {
    text: 'Source: <a href="http://ec.europa.eu/eurostat/web/' +
      'labour-market/labour-costs/main-tables">eurostat</a>'
  },

  xAxis: {
    type: 'category',
    labels: {
      rotation: 0
    },
    title: {
      text: 'Column widths are proportional to GDP'
    }
  },

  legend: {
    enabled: false
  },

  series: [{
    name: 'Labor Costs',
    data: [
      ['Norway', 50.2, 335504],
      ['Denmark', 42, 277339],
      ['Belgium', 39.2, 421611],
      ['Sweden', 38, 462057],
      ['France', 35.6, 2228857],
      ['Netherlands', 34.3, 702641],
      ['Finland', 33.2, 215615],
      ['Germany', 33.0, 3144050],
      ['Austria', 32.7, 349344],
      ['Ireland', 30.4, 275567],
      ['Italy', 2.8, 1672438],
      ['United Kingdom', 2.7, 66911],
      ['Spain', 21.3, 76564],
     ...