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 user = results.userdata;

var errorFunc = function(yArr, yErr){
		var yRes = [];
    for (var i = 0; i < yArr.length; i++) {
  		var point = [
      	yArr[i] - yErr[i],
        yArr[i] + yErr[i]
      ]
      yRes.push(point)
	  }
    return yRes
}

var errorbartriple = function (xArr, yArr1, yErr1, yArr2, yErr2, yArr3, yErr3,title, value, unit, xName, names, chart_container) {
    var yArr = [yArr1, yArr2, yArr3];
    var yErr = [errorFunc(yArr1, yErr1), errorFunc(yArr2, yErr2), errorFunc(yArr3, yErr3)];
		var series = [];
    labels = [false, false, true];
    colors = ['#63C4C6', '#A3D3CE', 'rgba(235,93,64,1)'];

		for (var i=0;i<3;i++){
				var data = {
            name: names[i],
            type: 'column',
            color: colors[i],
            data: yArr[i],
            dataLabels: {
                enabled: labels[i],
                y: -20,
                style: {
                    fontSize: '16px',
                    color: 'white',
                    textOutline: '0px',
                    fontWeight: 'normal',
                }
            },
            tooltip: {
                headerFormat: xName + ' = {point.x} <br>',
                pointFormat: names[i] + ": " + value + ' = {point.y} ± '
            }
        }
        var error = {
            name: 'CdA',
            type: 'errorbar',
            color: colors[i],
            data: yErr[i],
            tooltip: {
                pointFormatter: function () {
                    return Highcharts.numberFormat(this.high - this.low, 0) + ' ' + unit + '<br>';
                }
            }
        }
        series.push(data);
        series.push(error);
    }

    var options = {
        chart: {
            renderTo: chart_container,
            backgroundColor: null,
            zoomType: 'xy',
            style: {
                fontFamily: 'Fira Sans'
            }
        },
        title: {
       ...