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/modules/annotations.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 x = results.parameter.test;
var data = results.parameter;

//resultbar(x, data.time_percent, data.time_percent_diff, data.time, data.time_diff, 1, 'Time-Advantages', 'time [p. u.]', 'Test', 'chart1');

var stackedBar = function(xArr, yArr1, yArr2, yNames1, yNames2, title, xName, xUnit, yName, color, chart_container) {

    var ymin = Math.min.apply(null, yArr1);
    var ymax = Math.max.apply(null, yArr1);
    var dy = 1 - ymin;
    ymin = ymin - dy/2;
    ymin = Math.min(0.99, ymin);
    var yBoni = [];
    var yMali = [];
    var series = [];

    for (var i = 0; i < yArr2.length; i++) {
      if (yArr2[i] < 0){
        var yMalus = yArr2[i];
        var yBonus = 0;
      } else {
        var yBonus = yArr2[i];
        var yMalus = 0;
      }
      var pointBonus = {
        x: xArr[i],
        y: yBonus,
      };
      var pointMalus = {
        x: xArr[i],
        y: yMalus,
      };
			yBoni.push(pointBonus);
      yMali.push(pointBonus);
    }

    for (i = 0; i < xArr.length; i++) {
        var point = {
            name: yNames1[i],
            x: xArr[i],
            y: yArr1[i],
        };
        series.push(point);
    }

    var options = {
        chart: {
            renderTo: chart_container,
            type: 'column',
            backgroundColor: null,
            style: {
                fontFamily: 'Fira Sans'
            },

        },
        title: {
            text: title,
            style: {
                fontSize: '24px',
                color: 'white'
            },
        },
        xAxis: {
            title: {
                enabled: false,
            	text: xName,
                style: {
                    fontSize: '16px',
                    color: 'white'
                }
            },
            labels: {
                formatter: function () {
                    return this.value + ' ' + xUnit;
                },
                style: {
                    fontSize: '16px',
                    color: 'white',
...