Highcharts Demo

author(s): Torstein Hønsi

by Vladyslav Kampov

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- <script src="https://code.highcharts.com/modules/annotations.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" style="height: 400px; min-width: 380px"></div>

CSS

#container {
    max-width: 800px;
    min-width: 320px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

// Data generated from http://www.bikeforums.net/professional-cycling-fans/1113087-2017-tour-de-france-gpx-tcx-files.html
var data = [[1, 3], [2, 4], [3, 3]];

// Now create the chart
Highcharts.chart('container', {
                chart: {
                    type: 'line',
                    panning: true,
                    panKey: 'shift',
                    scrollablePlotArea: {
                        minWidth: 600
                    }
                },
                annotations: [
                    {
                        labels: [{
                            point: {
                                xAxis: 0,
                                yAxis: 0,
                                x: 2,
                                y: 4
                            },
                            text: 'Arbois'
                        }
                       ],
                        labelOptions: {
                            backgroundColor: 'rgba(255,255,255,0.5)',
                            verticalAlign: 'top',
                            y: 15
                        }
                    }
                ],
                xAxis: {
                    type: 'datetime',
                    tickmarkPlacement: 'on',
                    dateTimeLabelFormats: {
                        millisecond: '%H:%M:%S.%L',
                        second: '%H:%M:%S',
                        minute: '%H:%M',
                        hour: '%H:%M',
                        day: '%e. %b',
                        week: '%e. %b',
                        month: `%b '%y`,
                        year: '%Y'
                    },
                    title: {
                        enabled: false
                    }
                },
                tooltip: {
                    pointFormat:
                        '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:,.0f}</b><br/>',
                    split: true,
                    shared: true
      ...