Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

JavaScript

ranges = [0, 3, 10, 30, 150];

function findRange(val) {
  for (var i = 0; i < ranges.length - 1; i++) {
    var low = ranges[i],
      high = ranges[i + 1];

    if (low <= val && high > val) {
      return {
        low: low,
        high: high,
        index: i
      };
    }
  }
}


var chart = Highcharts.chart('container', {


  yAxis: {
    tickPositions: [0, 1, 2, 3, 4],
    labels: {
      formatter: function() {
        return ranges[this.pos];
      }
    }
  },

  tooltip: {
    pointFormat: "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.originalValue}</b><br/>"
  },

  series: [{
    data: [2, 55, 29, 120].map(function(val) {

      var range = findRange(val);

      var y = range.index + (val - range.low) / (range.high - range.low);

      return {
        y: y,
        originalValue: val
      };
    })
  }]
});