ChartJS - rolling twenty minute view

Question

Code below,

is there a way to get 'realtime' with a rolling twenty minute view? can't seem to find anything in the options that enables this.

ChartJS version 2.9.4

import 'chartjs-plugin-zoom';
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';

export default () => {
    const data = {
        datasets: [
            {
                label: 'MWC',
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                steppedLine: true,
                lineTension: 0,
                borderDash: [8, 4],
                data: new Array(1000).fill(null).map((_, i) => {
                    return {
                        x: new Date(new Date().setTime(new Date().getTime() + (i + 1) * 1000)),
                        y: random(500, 1000),
                    };
                }), // REPLACE THIS WITH REALTIME FEED
            },
        ],
    };

    const options = {
        scales: {
            xAxes: [
                {
                    type: 'realtime',
                    time: {
                        unit: 'minute',
                        displayFormats: {
                            quarter: 'h:mm a',
                        },
                    },
                    realtime: {
                        onRefresh: function(chart: any) {
                            // eslint-disable-next-line functional/immutable-data
                        },
                        delay: 2000,
                    },
                },
            ],
        },
        zoom: {
            enabled: true,
            mode: 'x',
            rangeMin: {
                x: null,
            },
            threshold: 10,
            rangeMax: {
                x: null,
            },
        },
    };
    return (
        <div>
            <Line data={data} options={options} />
        </div>
    );
};

Answer 1

duration property would help you to restrict view to a specific time limit. It accepts time in millisecods and for 20 minutes view you can configure it like below.

For more details, check plugin Configuration

realtime: {
    onRefresh: function(chart: any) {
            // eslint-disable-next-line functional/immutable-data
    },
    delay: 2000,
    duration: 1200000,
},