Highcharts Demo

author(s): Daniel Studencki

by Guillaume Seguin

HTML

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

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

CSS

#container {
    min-width: 400px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        zoomType: 'x',
        type: 'timeline'
    },
    xAxis: {
        type: 'datetime',
        visible: false
    },
    yAxis: {
        gridLineWidth: 1,
        title: null,
        labels: {
            enabled: false
        }
    },
    legend: {
        enabled: false
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    tooltip: {
        style: {
            width: 300
        }
    },
    series: [{
        dataLabels: {
            allowOverlap: false,
            format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
                '{point.x:.0f} €</span><br/>{point.name}'
        },
        marker: {
            symbol: 'circle'
        },
        data: [{
            x: 769382.6661703227,
            name: 'Prix du marché'
        }, {
            x: 534889.0721818274,
            name: 'Estimation'
        }]
    }]
});