[Chartjs]-Chart.js react-chartjs-2 and chartjs-plugin-streaming dependency error

by

1👍

✅

chartjs-plugin-streaming requires chart.js version 3, see the "COMPATIBILITY NOTE" in the introduction section of its docs.

So, one solution is to downgrade your chart.js version from 4.2.1 (latest) to one of the 3 versions. The documentation of the site chartjs.org is still alive for a lot of old versions, just select the version from the dropdown on the top of the page.

react-charts-2 also supports both versions 3 and versions 4 of chart.js. Here’s the guide on how to use react-chart-2 with chart.js v3

Alternatively, you may consider if you really need the plugin. It does offer some convenience and some advanced features. However, the current options for updating the charts see the docs are quite strong, and in combination with current tools for getting the data over the net like fetch or axios you’ll be able to do the same things, and enjoy the use of the updated versions of all tools.

As an example, here’s a very basic update sequence based only
on chart.js v4 update functionality:

const NData = 200,
    nUpdate = 3, dt = 100,
    dataGenerator = (from, to) => Array.from({length: to-from+1}, (_, i)=>Math.sin((i+from)*2*Math.PI/NData*4)*(1+Math.random()));

const myChart = new Chart(document.getElementById("myChart"), {
    type: 'line',
    data: {
        labels: Array.from({length: NData+1}, (_,i)=>'@'+(i/NData*100).toFixed(0)+'%'),
        datasets: [{
            label:'sin*(1+noise)',
            pointStyle: 'circle',
            lineTension: 0.2,
            borderColor: '#479',
            pointRadius: 0,
            data: dataGenerator(0, NData-1)
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales:{
            x:{
                ticks: {
                    maxTicksLimit: 10.1
                }
            },
            y:{
                min: -2,
                max: 2
            }
        },
        //animation:{duration:0},
    }
});

let current = NData-1;

let ih = setInterval(updateChart, dt);
const button = document.querySelector('#pause');
button.onclick = function(){
    if(ih){
        clearInterval(ih);
        ih = 0;
        button.innerText = 'Continue';
    }
    else{
        ih = setInterval(updateChart, 100);
        button.innerText = 'Pause';
    }
}

function updateChart() {
    myChart.data.datasets[0].data.splice(0, nUpdate);
    myChart.data.datasets[0].data.push(...dataGenerator(current+1, current+nUpdate));
    current+=nUpdate;
    myChart.update('none');
}
<div style="height:300px; width:95vw; display: inline-block; border: 1px solid gray">
<canvas id="myChart"></canvas>
</div>
<button id="pause">Pause</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js" integrity="sha512-vCUbejtS+HcWYtDHRF2T5B0BKwVG/CLeuew5uT2AiX4SJ2Wff52+kfgONvtdATqkqQMC9Ye5K+Td0OTaz+P7cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></body>

Leave a comment