JSFiddle - React, Tailwind, and code Playground

S. Schluricke

by Tenobaal

HTML

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

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

CSS

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

JavaScript

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 ]

highchartsBar = function(xArr, yArrTime, yArrRelative, title, yaxis_title, xaxis_title, color, chart_container) {

    console.log(xArr)
    console.log(yArrTime)
    console.log(yArrRelative)
    console.log(yaxis_title)
    console.log(xaxis_title)
    console.log(color)

    var ymin = Math.min.apply(null, yArrRelative) - 0.001;
    var ymax = Math.max.apply(null, yArrRelative) + 0.001;

    var labels = [];

    for (var i = 0; i < xArr.length; i++) {
        var label = {
            point: {
                x: i,
                y: yArrRelative[i],
                xAxis: 0,
                yAxis: 0,
            },
            text: yArrTime[i],
            };

        labels.push(label);
    }

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

        },
        title: {
            text: title,
            style: {
                fontSize: '24px',
                color: 'white'
            },
        },
        xAxis: {
            categories: xArr,
            labels: {
                style: {
                    fontSize: '20px',
                    color: 'white',
                },
            },
        },
        yAxis: {
            min: ymin,
            max: ymax,
            title: {
                enabled: false,
            },
            labels: {
                style: {
                    fontSize: '20px',
                    color: 'white',
                },
            },
        },
        legend: {
            enabled: false
        },
        plotOptions: {
     ...