JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="chartArea">
    <div class="frame">
        <div id="container" style="height: 300px"></div>
    </div>
    <div class="info">example by | michael@hinnerup.net | www.hinnerup.net</div>
</div>

CSS

body {
    background-color: #313431;
    color: #fff;
}
.chartArea {
    padding: 2em;
}
.frame {
    background-color: #424542;
    padding: 1em;
    border: solid #00be63 2px;
}
.info {
    background-color: #212421;
    color: #73b694;
    padding: 2em;
    font-family: tahoma, arial;
    font-weight: bold;
    font-size: small;
    text-align: center;
}

JavaScript

// Open source example - use and modify as you like
// See http://www.highcharts.com
$(function () {
    var updateDataSpeedMs = 1000,
        animSpeedMs = updateDataSpeedMs > 400 ? updateDataSpeedMs - 200 : updateDataSpeedMs,
        chartContainer = $('#container').highcharts({
            chart: {
                type: 'spline'
            },
            colors: ['#0dedbd', '#29c7a4', '#0abd8d', '#079b7a'],
            title: {
                style: {
                    color: '#00be63',
                    fontWeight: 'bold'
                },
                text: 'Dynamic data chart w. Highcharts',
                x: -50
            },
            xAxis: {
                categories: [],
                title: {
                    text: 'X-axis title',
                    style: {
                        color: '#00be63',
                        fontWeight: 'bold'
                    }
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                tickInterval: 1,
                title: {
                    text: 'Y-axis title',
                    style: {
                        color: '#00be63',
                        fontWeight: 'bold'
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                enabled: false
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                marker: {
                    'enabled': true
                },
                name: 'Streaming Data 1',
                data: []
            }, {
                marker: {
                    'enabled': true
                },
                name: 'Streaming Data 2',
           ...