x-range chart

by jakub_noga_antsolutions

HTML

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

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/xrange.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.chart('container', {
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  chart: {
    type: 'xrange',
  },
  title: {
    text: 'Activities'
  },
  xAxis: {
    type: 'datetime',
    labels: {
      format: '{value:%H:%M}'
    }    
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Sleeping', 'Eating', 'Working', 'Playing'],
    reversed: true,
    plotBands: [{
      from: -.5,
      to: .5,
      color: '#e9f7fa'
    }, {
      from: 1.5,
      to: 2.5,
      color: '#edf3f3'
    }]
  },
  series: [{
    name: 'Project 1',
    // pointPadding: 0,
    // groupPadding: 0,
    borderColor: 'transparent',
    borderRadius: 0,
    borderWidth: 0,
    pointWidth: 20,
    zIndex: 1,
    data: [{
      x: Date.UTC(2014, 10, 21, 7, 10),
      x2: Date.UTC(2014, 10, 21, 9, 25),
      y: 0,
      color: '#83d6e7'
    }, {
      x: Date.UTC(2014, 10, 21, 9, 25),
      x2: Date.UTC(2014, 10, 21, 10, 40),
      y: 1,
      color: '#669aab'
    }, {
      x: Date.UTC(2014, 10, 21, 10, 40),
      x2: Date.UTC(2014, 10, 21, 11, 41),
      y: 2,
      color: '#3c6677'
    }, {
      x: Date.UTC(2014, 10, 21, 11, 41),
      x2: Date.UTC(2014, 10, 21, 14, 14),
      y: 2,
      color: '#3c6677'
    }, {
      x: Date.UTC(2014, 10, 21, 14, 14),
      x2: Date.UTC(2014, 10, 21, 15, 13),
      y: 1,
      color: '#669aab'
    }, {
      x: Date.UTC(2014, 10, 21, 15, 13),
      x2: Date.UTC(2014, 10, 21, 18, 20),
      y: 1,
      color: '#669aab'
    }, {
      x: Date.UTC(2014, 10, 21, 18, 20),
      x2: Date.UTC(2014, 10, 21, 19, 21),
      y: 2,
      color: '#3c6677'
    }, {
      x: Date.UTC(2014, 10, 21, 19, 21),
      x2: Date.UTC(2014, 10, 21, 23, 59),
      y: 3,
      color: '#adadad'
    }]
  }, {
    type: 'line',
    tooltip: {
      enabled: false
    },
    marker: {
      radius: 0
    },
    data: [{
      x: Date.UTC(2014, 10, 21, 7, 10),
      y: 0,
    }, {
      x:...