[Chartjs]-How to scroll in x-axis in react-chartsjs-2

by

2👍

✅

You can use chartjs-plugin-zoom for this.

import zoomPlugin from 'chartjs-plugin-zoom';
import { Chart as ChartJS} from 'chart.js';
ChartJS.register(zoomPlugin);

After registering zoom plugin, modify the options object.

  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
      },
      zoom: {
        pan: {
            enabled: true,
            mode: 'x'
        },
        zoom: {
            pinch: {
                enabled: true       // Enable pinch zooming
            },
            wheel: {
                enabled: true       // Enable wheel zooming
            },
            mode: 'x',
        }
    }
    },
  };

Leave a comment