How to create a pannable real-time chart

Question

I'm using react-chart-2 with chartjs-plugin-zoom and chartjs-plugin-streaming plugins. Now I'm showing the last 20 data points in the chart. I want to modify this to pannable chart.

    const [sensorReadings, setSensorReadings] = useState();
       
    useEffect(()=>{
       // code for fetch initial readings from back end
    },[]);
    datasets: [
       {
           backgroundColor: colors.indigo[500],
           data: sensorReadings.map(reading => ({ x: reading.time, y: reading.value })),
           label: 'This year',
           fill: false
       }
   ]

This is my datasets object. Here the sensor readings object will have last 20 readings. When a user scrolls the charts (scrolls to the older date), I want to trigger a function say fetchRest(), that will fetch the next 20 readings and update the state. My question is how to trigger that fetchRest, when a user scrolls?

Edited

This is similar to blog post page, where at the beginning we display only certain amount of posts and when the user reaches the bottom of the page, we fetch next set of posts and display them.

user_7470062 · Answer

The chartjs-plugin-zoom provide an event listeners for user "onPan" interaction. You can access them here https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#pan-events

So the ideas is to call fetchRest() on user pan, so you can attach your function call, in the event listener, like :

pan: {
   onPan: function(chart){
      fetchRest() //fetch call
   }
},

How to create a pannable real-time chart

1 Answers