JSFiddle - React, Tailwind, and code Playground

S. Schluricke

by Tenobaal

HTML

<head>
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
</head>
<body>

  <div id="chart1" style="height: 400px; margin-top: 1em"></div>

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

<script>

</script>

CSS

#chart1 {
	max-width: 800px;
	margin: 0 auto;
  background-color: #1B4152;
}

JavaScript

var time = data.dataframe.timestamp;
var power = data.dataframe.power;
var altitude = data.dataframe.altitude;
var heartrate = data.dataframe.heart_rate;

var chartlines = function (time, power, altitude, heartrate, title, name1, name2, name3, chart_container) {
    var yData1 = [];
    var yData2 = [];
    var yData3 = [];
    
    for (var i = 0; i<time.length; i++){
    		yData1.push([time[i], power[i]]);
        yData2.push([time[i], altitude[i]]);
        yData3.push([time[i], heartrate[i]]);
    }
    
    var options = {
        chart: {
            renderTo: chart_container,
            turboThreshold: 10000,
            backgroundColor: null,
            zoomType: 'xy',
            style: {
                fontFamily: 'Fira Sans'
            }
        },
        title: {
            text: title,
            style: {
                fontSize: '24px',
                color: 'white'
            }
        },
        xAxis: {
            tickInterval: 20,
            labels: {
                style: {
                    fontSize: '16px',
                    color: 'white'
                }
            }
        },
        yAxis: {
								title: {
                enabled: true,
                style: {
                    fontSize: '16px',
                    color: 'white'
                }             
            },
            labels: {
                style: {
                    fontSize: '16px',
                    color: 'white'
                }
            },
            gridLineColor: '#6f828c'
        },
        legend: {
            enabled: true
        },
        tooltip: {
            shared: true
        },
        series: [{
            name: name1,
            type: 'line',
            color: 'rgba(100,194,200,1)',
            data: yData1,
            tooltip: {
            		enabled: false
        		},
        },{
            name: name2,
            type: 'area',
            color: 'rgba(235,93,64,1)',
            data: yData2,
        ...