Highcharts Demo

author(s): Torstein Hønsi

by Geo George

HTML

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

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

CSS

@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

.highcharts-xrange-series .highcharts-point {
  stroke-width: 1px;
  stroke: gray;
}

.highcharts-partfill-overlay {
  fill: black;
  fill-opacity: 0.3;
}

.highcharts-data-label text {
  fill: white;
  text-shadow: 1px 1px black, -1px 1px black, -1px -1px black, 1px -1px black;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'xrange'
  },
  title: {
    text: 'Highcharts X-range'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
       // year: '%Y'
     }
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true
  },
  plotOptions: {
    series: {
      dataLabels: {
        align: 'center',
        enabled: true,
        format: "{point.name}"
      }
    }
  },
  tooltip: {
    formatter: function() {
    console.log(this)
      return this.point.name+' is in <b>'+this.yCategory+'</b><br>  from <b>' + Highcharts.dateFormat('%e %b %Y',
          new Date(this.x)) +
        ' to '+ Highcharts.dateFormat('%e %b %Y',
                                          new Date(this.x2))+'</b> ';
    }
  },
  series: [{
    name: 'Project 1',
    // pointPadding: 0,
    // groupPadding: 0,
    pointWidth: 20,
    data: [{
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 1),
      y: 0,
      name: 'Proto1'
    }, {
      x: Date.UTC(2014, 11, 1),
      x2: Date.UTC(2014, 11, 5),
      y: 0,
      name: 'Proto2'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 10),
      y: 0,
      name: 'Proto3'
    }, {
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 10, 25),
      y: 1,
      name: 'Dev1'
    }, {
      x: Date.UTC(2014, 10, 25),
      x2: Date.UTC(2014, 11, 5),
      y: 1,
      name: 'Dev2'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 10),
      y: 1,
       name: 'Dev3'
    }, {
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 1),
      y: 2,
      name: 'Test1'
    }, {
      x: Date.UTC(2014, 11, 1),
      x2: Date.UTC(2014, 11, 5),
      y: 2,
      name: 'Test2'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 10),
      y: 2,
      name: 'Test3'
    }, ],
    dataLabels: {
      enabled: true
    }
  }]

});