Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div style="display: flex; ">
  <div id="container" style="min-width: 850px; height: 700px; margin: 0 auto"></div>

  <div style="display: flex">
    <div>Total Scheduled</div>
    <div>Total Worked</div>
  </div>
</div>

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'columnrange',
        inverted: true
    },

    title: {
        text: 'Your Schedule by day'
    },

    subtitle: {
        text: 'Compairing your time worked vs scheduled'
    },

    xAxis: {
        type: 'datetime',
        plotLines: [{
        	color:'#ccc',
          value: Date.UTC(1,1,3,12,0,0),
          id: 'plotLineId',
          dashStyle: 'solid',
          width: 1,
        },{
        	color:'#ccc',
          value: Date.UTC(1,1,4,12,0,0),
          id: 'plotLineId',
          dashStyle: 'solid',
          width: 1,
        },{
        	color:'#ccc',
          value: Date.UTC(1,1,5,12,0,0),
          id: 'plotLineId',
          dashStyle: 'solid',
          width: 1,
        },{
        	color:'#ccc',
          value: Date.UTC(1,1,6,12,0,0),
          id: 'plotLineId',
          dashStyle: 'solid',
          width: 1,
        }],
        dateTimeLabelFormats: {
          minute: '%l:%M%p',
          hour: '%l %p',
          day: '%A, %b %e'
        },
    },

    yAxis: {
          title: 'Times',
          descrition: 'Times within a 24 hour day.',
          endOnTick: false,
          opposite: true,
          min: Date.UTC(0,0,0,5,0,0),
          max: Date.UTC(0,0,0,22,30,0),
          type: 'datetime',
	          plotLines: [{
                   value: Date.UTC(0,0,0,6,0,0),
                   id: 'plotLineId',
                   color: 'blue',
                   dashStyle: 'shortdash',
                   width: 2,
                   zIndex: 4,
               }, {
                   value: Date.UTC(0,0,0,21,0,0),
                   id: 'plotLineId',
                   color: 'blue',
                   dashStyle: 'shortdash',
                   width: 2,
                   zIndex: 4,
               }],
          dateTimeLabelFormats: {

            minute: '%l:%M%p',
            hour: '%l %p',
            day: '%l %p'

          },
    },

    plotOptions: {
        columnrange: {
...