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>

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 ]

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

    var ymin = Math.min.apply(null, yArrRelative) - 0.001;
    var ymax = Math.max.apply(null, yArrRelative) + 0.001;
    var series = [];
    if (yaxis_title == ''){
    	yaxis = false;
    } else {
    	yaxis = true;
    }

    for (var i = 0; i < xArr.length; i++) {
        var point = {
						name: yArrTime[i],
            x: xArr[i],
            y: yArrRelative[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: {
            	text: xaxis_title,
              style: {
              	fontSize: '20px',
                color: 'white'
              }
        		},
            labels: {
                style: {
                    fontSize: '20px',
                    color: 'white',
                },
            },
        },
        yAxis: {
            min: ymin,
            max: ymax,
            title: {
                enabled: yaxis,
                text: yaxis_title,
            },
            labels: {
            		enabled: yaxis,
                style: {
                    fontSize: '20px',
                    color: 'white',
                },
            },
        },
        legend: {
            enabled: false
       ...