JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.7.1/chartjs-plugin-streaming.min.js"></script>
<canvas id="chart"></canvas>

JavaScript

var img = new Image();
img.src = 'https://i.imgur.com/yDYW1I7.png';
img.onload = function() {
  new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
      datasets: [{
        data: []
      }, {
        data: [],
        showLine: false,
        pointStyle: img
      }]

    },
    options: {
      scales: {
        xAxes: [{
          type: 'realtime',
          realtime: {
            onRefresh: function(chart) {
              chart.data.datasets[0].data.push({
                x: Date.now(),
                y: Math.random()
              });
              chart.data.datasets[1].data.push({
                x: Date.now(),
                y: 0
              });
            }
          }
        }]
      }
    }
  });
};