Highcharts Demo

author(s): Torstein Hønsi

by Umair Rafiq

HTML

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

CSS

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        backgroundColor:'rgba(255, 255, 255, 0.0)',
        marginTop: 0
    },
    title: {
        text: null,
        margin: 0
    },
    xAxis: {
        lineWidth: 0,
			   minorGridLineWidth: 0,
   			lineColor: 'transparent',
   			labels: {
       		enabled: false
   			},
   			minorTickLength: 0,
   			tickLength: 0
    },
    yAxis: {
    		title:'',
        lineWidth: 0,
			   minorGridLineWidth: 0,
   			lineColor: 'transparent',
   			labels: {
       		enabled: false
   			},
   			minorTickLength: 0,
   			tickLength: 0,
        gridLineColor: 'transparent',
    },
    tooltip: { enabled: false },
    credits: { enabled: false	},
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: 'gray',
        pointWidth: 20,
        showInLegend: false,     
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }],
        dataLabels: {
            enabled: true
        }
    }]

});