Highcharts Demo

author(s): Torstein Hønsi

by demaupeoucorentin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

CSS

#container {
	min-width: 310px;
	max-width: 800px;
	height: 600px;
	margin: 0 auto
}

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Jour de dépassement'
    },

    subtitle: {
        text: 'Source: wikipedia.org'
    },
    
    yAxis: {
    	title: {
            text: 'Date de dépassement'
        },
    	type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year

            year: '%b'
        },
    },

	tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x}: {point.y:%e. %b}'
    },


    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 1986
        }
    },

    series: [{
    	name:"",
        data: [
            [1986, Date.UTC(2019, 11, 31)],
            [1990, Date.UTC(2019, 11,  7)],
            [1993, Date.UTC(2019, 09,  21)],
            [1995, Date.UTC(2019, 10,  21)],
            [2000, Date.UTC(2019, 10,  1)],
            [2003, Date.UTC(2019, 08,  22)],
            [2005, Date.UTC(2019, 09,  5)],
            [2006, Date.UTC(2019, 09,  9)],
            [2007, Date.UTC(2019, 08,  28)],
            [2008, Date.UTC(2019, 08,  23)],
            [2009, Date.UTC(2019, 08,  25)],
            [2010, Date.UTC(2019, 07,  21)],
            [2011, Date.UTC(2019, 08,  27)],
            [2012, Date.UTC(2019, 07,  22)],
            [2013, Date.UTC(2019, 07,  20)],
            [2014, Date.UTC(2019, 07,  18)],
            [2015, Date.UTC(2019, 07,  13)],
            [2016, Date.UTC(2019, 07,  3)],
            [2017, Date.UTC(2019, 07,  2)],
            [2018, Date.UTC(2019, 07,  1)],
            [2019, Date.UTC(2019, 06,  29)],
            [2020, Date.UTC(2019, 07,  22)]
        ]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
     ...