JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<div id="parent" style="padding: 5px; margin-bottom: 5px; height: 300px; border: 4px solid navy;">
    <canvas id="myChart" style="border:1px solid #000;"></canvas>
</div>

JavaScript

// Chart.js documentation example, nothing weird here
// Create canvas
var parent = document.getElementById('parent');
var canvas = document.getElementById('myChart'),
    ctx = canvas.getContext('2d'),
    startingData = {
        labels: [1, 2, 3, 4, 5, 6, 7],
        datasets: [{
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            data: [65, 59, 80, 81, 56, 55, 40]
        }, {
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            data: [28, 48, 40, 19, 86, 27, 90]
        }]
    };
var wdt=parent.clientWidth-parseInt(parent.style.paddingLeft)-parseInt(parent.style.paddingRight);

var ht=parent.clientHeight-parseInt(parent.style.paddingTop)-parseInt(parent.style.paddingBottom);

canvas.setAttribute('height',ht+"px");
canvas.setAttribute('width',wdt+"px");
// Reduce the animation steps for demo clarity.
var optionChart = new Chart(ctx).Line(startingData, {
    animationSteps: 15
});


setInterval(function () {
    // Get a random index point
    var indexToUpdate = Math.round(Math.random() * startingData.labels.length);

    // Update one of the points in the second dataset
    optionChart.datasets[1].points[indexToUpdate].value = Math.random() * 100;

    optionChart.update();
}, 5000);