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 id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

    chart: {
					type: 'columnrange',
					inverted: true
				},
				title: {
					text: ''
				},
				xAxis: {
					categories: [
						'Categ1','Categ2'				]
				},
				yAxis: {
					type: 'datetime',
					title: {
						text: ''
					},
					minTickInterval: 28*24*3600*1000,
					dateTimeLabelFormats: {
						month: '%b',
						year: '%b'
					},
				},
				tooltip: {
					headerFormat: '<b>{point.x}</b>',
					pointFormat: ''
				},
				plotOptions: {
					columnrange: {
						pointPadding:0
					}
				},
				legend: {
					enabled: false
				},
				series: [
					{
						name: '',
						color: '#795548',
						data: [
							{
              	low:Date.UTC(2017,1,1),
                high:Date.UTC(2017,3,31),
                color:'#ffae3d'
              },
              {
              	low:Date.UTC(2017,2,1),
                high:Date.UTC(2017,4,30),
                color:'#ff3d3d'
              }						]
					}
				]
});