Highcharts Demo

author(s): Torstein Hønsi

by pepperdigital

HTML

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

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

CSS

#container {
	max-width: 800px;
	min-width: 380px;
	margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
    title: {
        text: 'Highcharts variwide series on a datetime axis'
    },
    xAxis: {

        min: 0,
        max: 10
    },
    yAxis: [{
        type: 'datetime',
        gridLineWidth: 0,
        title: {
            text: 'Lap'
        },
        labels: {
            format: '{value:%M:%S}'
        }
    }],
    series: [{
        name: 'Lap',
        type: 'variwide',
        data: [{
            x: 0,
            y: 3.45,
            z: 5
        }, {
            x: 5.5,
            y: 3.25,
            z: 4,
            color: 'rgba(0, 255, 0, 0.2)'
        }, {
            x: 10,
            y: 3.05,
            z: 4
        }],
        tooltip: {
            pointFormat: 'Pace: {point.y:%M:%S} min/km<br>Lap time: {point.z:%M:%S} min'
        },
        borderColor: 'black',
        color: 'rgba(0, 0, 255, 0.2)',
        pointRange: 0
    }]
});