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>
xArr = [ 0.2, 0.21, 0.22, 0.23, 0.24, 0.25, 0.26, 0.27, 0.28, 0.29, 0.30 ];

yArrTime = [ "04:36:29", "04:40:36", "04:44:36", "04:48:28", "04:52:14", "04:55:54", "04:59:29", "05:02:58", "05:06:22", "05:09:41", "05:12:56"];

yArrRelative = [ 1.009, 1.007, 1.005, 1.004, 1.002, 1, 0.998, 0.996, 0.994, 0.993, 0.991 ];

results = {"gpsdata": {"Route": [9.65, 19.38, 29.26, 39.26, 49.5, 59.79, 70.03, 80.41, 90.86, 101.44, 112.19, 123.0, 133.8, 144.61, 155.37, 166.08, 176.79, 187.58, 198.48, 209.45, 220.31, 231.35, 242.5, 253.65, 264.9, 276.15, 287.53, 298.99, 310.37, 321.8, 333.17, 344.48, 355.74, 366.99, 378.17, 389.36, 400.55, 411.74, 422.92, 434.08, 445.27, 456.46, 467.59, 478.7, 489.79, 500.87, 511.93, 523.01, 534.21, 545.41, 556.67, 567.87, 579.13, 590.26, 601.45, 612.7, 623.89, 635.14, 646.27, 657.38, 668.56, 679.78, 691.12, 702.5, 713.91, 725.23, 736.69, 748.14, 759.63, 771.07, 782.63, 794.14, 805.64, 816.92, 828.29, 839.72, 851.1, 862.41, 873.66, 884.94, 896.25, 907.5, 918.72, 929.86, 941.15, 952.36, 963.59, 974.81, 986.08, 997.28], "Elevation": [-1.8000000000000114, -2.6000000000000227, -3.3999999999999773, -5.600000000000023, -4.399999999999977, -2.3999999999999773, -2.6000000000000227, -3.1999999999999886, -3.8000000000000114, -3.0, -2.1999999999999886, -2.8000000000000114, -5.0, -5.600000000000023, -3.8000000000000114, -3.0, -3.3999999999999773, -3.3999999999999773, -3.3999999999999773, -3.3999999999999773, -3.1999999999999886, -3.1999999999999886, -3.0, -3.1999999999999886, -3.1999999999999886, -3.3999999999999773, -3.1999999999999886, -3.1999999999999886, -3.1999999999999886, -3.3999999999999773, -3.1999999999999886, -3.0,...

CSS

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

JavaScript

var xDataSetup = results.parameter2.setup;
var yDataSetup = results.parameter2;

var errorline = function (xArr, yArr1, yArr2, title, value, unit, xName, chart_container) {
    var yerrors = []

    for (var i = 0; i < yArr2.length; i++) {
        var error = [
            yArr1[i] - yArr2[i],
            yArr1[i] + yArr2[i]
        ]
        yerrors.push(error);
    }

    var options = {
        chart: {
            renderTo: chart_container,
            backgroundColor: null,
            zoomType: 'xy',
            style: {
                fontFamily: 'Fira Sans'
            }
        },
        title: {
            text: title,
            style: {
                fontSize: '24px',
                color: 'white'
            }
        },
        tooltip: {
            shared: true
        },
        xAxis: {
            categories: xArr,
            labels: {
                formatter: function () {
                    return xName + ' ' + this.value;
                },
                style: {
                    fontSize: '16px',
                    color: 'white'
                }
            }
        },
        yAxis: {
            title: {
                enabled: false
            },
            labels: {
                enabled: false,
            },
            gridLineColor: '#6f828c'
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'CdA',
            type: 'line',
            color: 'rgba(235,93,64,1)',
            data: yArr1,
            dataLabels: {
                enabled: true,
                style: {
                    fontSize: '16px',
                    color: 'white',
                    textOutline: '0px',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                headerFormat: xName + ' = {point.x} <br>',
                pointFormat: value + ' = {point.y} ± '
            }
        }, {
            name: 'CdA',
            type:...