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>
var data = {
  "dataframe": {
    "absolute_pressure": [
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
      -1,
...

CSS

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

JavaScript

var yArr = data.powerframe.power;
var xArr = data.powerframe.time;

ftppower = function(xArr, yArr, title, xName, xUnit, yName, color, chart_container) {

    var series = [];
    for (var i = 0; i < xArr.length; i++) {
        var point = [
            xArr[i] + ' min',
            yArr[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: {
						type: 'category',
            title: {
            	enabled: false,
            },
            labels: {
                formatter: function () {
                    return this.value;
                },
                style: {
                    fontSize: '20px',
                    color: 'white',
                },
            },
        },
        yAxis: {
            title: {
                enabled: false,
            },
            labels: {
							enabled: false
            },
        },
        tooltip: {
            headerFormat: xName + ' = {point.y} ' + xUnit + '<br>',
            pointFormat:  yName + ' = {point.name}'
		    },
        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                pointPadding: 0,
                borderWidth: 0,
                groupPadding: 0.1,

                shadow: false,
            },
        },

        series: [{
            color: color,
            data: series,
            dataLabels: {
                crop: false,
                overflow: 'none',
                enabled: true,
                format: '{point.y} ' + xUnit,
                style: {
                  fontSize: '20px',
                  color: 'white',
            ...