JSFiddle - React, Tailwind, and code Playground

by vibhuti

HTML

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

<div id="container" style="height: 400px; min-width: 380px"></div>

CSS

#container {
    max-width: 800px;
    min-width: 380px;
    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 elevationData = [
    
    [1, 100],
    [2, 200],
    [3, 300],
    [4, 200],
    [5, 500],
    [6, 200],
    [7, 100],
    [8, 800],
    [9, 400],
    [10, 1000],
    [11, 200],
    [12, 500],
    [13, 1000],
    [14, 400],
    [15, 1200],
    [16, 800],
    [17, 600],
    [18, 1000],
    [19, 500],
    [20, 200],
    [21, 900],
    [22, 700],
    [23, 900],
    [24, 1100]
   
];

// Now create the chart
Highcharts.chart('container', {

    chart: {
        type: 'area',
       	fillColor: 'red',
        zoomType: 'x',
        panning: true,
        panKey: 'shift',
        scrollablePlotArea: {
            minWidth: 1000
        }
    },

    title: {
        text: ''
    },

    

    annotations: [{
        labelOptions: {
            backgroundColor: 'red',
            verticalAlign: 'top',
            y: 15
        }
    }, {
        labels: [{
            point: {
                xAxis: 0,
                yAxis: 0,
                x: 101.44,
                y: 1026
            },
            x: -30,
            text: 'Col de la Joux'
        }]
    }, {
        labelOptions: {
            shape: 'connector',
            align: 'right',
            justify: false,
            crop: true,
            style: {
                fontSize: '0.8em',
                textOutline: '1px white'
            }
        }
    }],

    xAxis: {
        labels: {
            format: '{value}'
        },
       
        title: {
            text: 'Distance'
        }
    },

    yAxis: {
        startOnTick: true,
        endOnTick: false,
        maxPadding: 0.35,
        title: {
            text: null
        },
        labels: {
            format: '{value} m'
        }
    },

    tooltip: {
        headerFormat: 'Distance: {point.x:.1f} km<br>',
        pointFormat: '{point.y} m a. s. l.',
        shared: true
    },

    legend: {
       ...