Highcharts Demo

author(s): Torstein Hønsi

by Michel Munzert

HTML

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

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

/*
 Highcharts JS v6.1.2 (2018-08-31)
 X-range series

 (c) 2010-2017 Torstein Honsi, Lars A. V. Cabrera

 License: www.highcharts.com/license
*/
(function (g) {
  'object' === typeof module && module.exports ? module.exports = g : 'function' === typeof define && define.amd ? define(function () {
    return g
  }) : g(Highcharts)
})(function (g) {
  (function (c) {
    var g = c.addEvent
    var u = c.defined
    var v = c.Color
    var t = c.seriesTypes.column
    var h = c.each
    var w = c.isNumber
    var r = c.isObject
    var p = c.merge
    var l = c.pick
    var x = c.seriesType
    var y = c.Axis
    var n = c.Point
    var z = c.Series

    x('xrange', 'column', {
      colorByPoint: !0,
      dataLabels: {
        verticalAlign: 'middle',
        inside: !0,
        formatter: function () {
          var a = this.point.partialFill
          r(a) && (a = a.amount)
          u(a) || (a = 0)
          return 100 * a + '%'
        }
      },
      tooltip: {
        headerFormat: '\x3cspan style\x3d"font-size: 0.85em"\x3e{point.x} - {point.x2}\x3c/span\x3e\x3cbr/\x3e',
        pointFormat: '\x3cspan style\x3d"color:{point.color}"\x3e\u25cf\x3c/span\x3e {series.name}: \x3cb\x3e{point.yCategory}\x3c/b\x3e\x3cbr/\x3e'
      },
      borderRadius: 3,
      pointRange: 0
    }, {
      type: 'xrange',
      parallelArrays: ['x', 'x2', 'y'],
      requireSorting: !1,
      animate: c.seriesTypes.line.prototype.animate,
      cropShoulder: 1,
      getExtremesFromAll: !0,
      getColumnMetrics: function () {
        function a () {
          h(d.series,
            function (a) {
              var b = a.xAxis
              a.xAxis = a.yAxis
              a.yAxis = b
            })
        }
        var b
        var d = this.chart
        a()
        b = t.prototype.getColumnMetrics.call(this)
        a()
        return b
      },
      cropData: function (a, b, d, e) {
        b = z.prototype.cropData.call(this, this.x2Data, b, d, e)
        b.xData =...