[Chartjs]-Chartjs with zoom plugins, how to set limit data show on chart

by

1👍

✅

The zoom plugin is providing the limits node in its configuration where you can set the limtis on axes.

Maybe it could help your use case: https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#limits

0👍

This is what worked for me. You can hardcode it to zoom limits in the chart configs like below.

const config = {
    type: 'line',
    data: data,
    options: {
        animation: false,
        spanGaps: true,
        showLine: true,
        animation: {
            duration: 0 // general animation time
        },
        hover: {
            animationDuration: 0 // duration of animations when hovering an item
        },
        responsiveAnimationDuration: 0, // animation duration after a resize
        autoSkipPadding: 100,
        plugins: {
            zoom: {
                limits: {
                    x: {
                          minRange: getMinZoomRange(), // This is smallest time window you want to zoom into
                          min: 1680516080000,
                          max: 1680616080000,
                    },
                },
                pan: {
                    enabled: true,
                    mode: 'x'
                },
                zoom: {
                    wheel: {
                        enabled: true,
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x',
                }
            }
        },
        scales: {
            x: {
                type: 'time',
                time: {
                    // tooltipFormat: "yyyy-MMM-dd HH:mm",
                    displayFormats: {
                        day: "d-MMM HH:mm",
                        millisecond: "HH:mm:ss.SSS",
                        second: "HH:mm:ss",
                        minute: "HH:mm",
                        hour: "d-MMM HH:mm",
                    },
                    // unit: granularity.toLowerCase(),
                },
                // min: 0,
                // max: 0,
                ticks: {
                    source: 'auto'
                },
                displayFormats: {
                    second: 'MMM YYYY'
                }
            },
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Time in Seconds'
                }
            },
            requests: {
                type: 'linear',
                position: 'right',
                min: 0,
                max: 100
            }
        }
    }
};

Then you can programmatically change it like below. dataChart is the Chart object.

dataChart.config.options.plugins.zoom.limits.x.min = appDataSet['timeStamps'][0];
dataChart.config.options.plugins.zoom.limits.x.max = appDataSet.timeStamps[appDataSet['timeStamps'].length - 1];

Leave a comment