Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

(function(H) {
  H.seriesType('jump-line', 'column', {
    height: 6
  }, {
    translate: function() {
      H.seriesTypes.column.prototype.translate.apply(this);

      this.points.forEach(function(point) {
        point.shapeArgs.height = this.options.height;
      }, this);
    }
  });
}(Highcharts));

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  series: [{
    data: [1, 2, 3]
  }, {
    data: [2, 2, 2]
  }, {
    data: [3, 3, 3]
  }, {
    type: 'jump-line',
    pointPadding: 0,
    grouping: false,
    data: [4, 4, 4]
  }]
});