JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/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.js"></script>
<canvas id="myChart"></canvas>

JavaScript

var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'ECG',
            fontColor: "lightblue",
            data: [],
            borderColor: "lightblue",
            borderWidth:1,
            fill: false,
            pointRadius: 0,
        },
        {
            label: 'PPG',
            data: [],
            borderColor: "red",
            borderWidth:1,
            fill: false,
            pointRadius: 0
        }
        ],
        
    },
    options: {
        scaleShowValues: true,
        responsive: false,
        maintainAspectRatio: false,
        //animation: true,
        elements:{
            points:{
                radius: 0
            }
        },
        title: {
            display: true,
            fontSize: 16,
            text: 'ECG and PPG'
        },
        animation: {
            duration: 0
        },
       
        scales: {
            yAxes: [{
               
                ticks: {
                    beginAtZero: false,
                    autoSkip: false
                },
                scaleLabel: {
                display:true,
                labelString: "ECG & PPG",
                fontSize: 16
                }
            }],
            xAxes: [{
                type: 'realtime',
                scaleLabel: {
                display:true,
                labelString: "Dati Campionati",
                fontSize: 16
                },
                ticks: {
                    autoSkip: false
                },
                realtime: {
                delay: 500,
                refresh: 500,
                onRefresh: function(chart) {
            myChart.data.datasets.forEach(function(dataset) {
              dataset.data.push({
                x: Date.now(),
                y: Math.random()
              });
            });
          }      
          }  
          }],
            
                
       ...