React Chart.js: Pan And Zoom Implementation Guide

Implementing interactive charts with pan and zoom capabilities can significantly enhance user experience, especially when dealing with large datasets. This article provides a comprehensive guide on how to integrate pan and zoom features into your Chart.js charts within a React application. We'll explore various functionalities, including smooth arrow-key panning, right-click drag zooming, wheel and pinch zoom, and performance optimizations for handling extensive data.

Setting Up Your Chart.js Component in React

To begin, you'll need to set up your React component with Chart.js. This involves installing the necessary libraries, creating a chart reference, and defining the chart's options and data. Let's walk through the initial steps to get your chart up and running.

Installing Chart.js and Related Plugins

First, ensure you have Chart.js and the required plugins installed in your project. You'll need chart.js, react-chartjs-2, and chartjs-plugin-zoom. Install these using npm or yarn:

npm install chart.js react-chartjs-2 chartjs-plugin-zoom

Or, if you prefer yarn:

yarn add chart.js react-chartjs-2 chartjs-plugin-zoom

Creating the Chart Component

Next, create a React component to house your chart. This component will manage the chart's data, options, and the chart reference. Here’s a basic structure for your component:

import React, { useRef, useEffect } from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Legend,
  Tooltip,
  Filler,
  TimeSeriesScale
} from "chart.js";
import zoomPlugin from "chartjs-plugin-zoom";

ChartJS.register(
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Legend,
  Tooltip,
  Filler,
  TimeSeriesScale,
  zoomPlugin
);

interface FinalChartProps {
  arr: Float32Array;
  time: Float32Array;
  yMin: number;
  yMax: number;
}

export default function FinalChart({ arr, time, yMin, yMax }: FinalChartProps) {
  const chartRef = useRef<any>(null);

  // Chart options will go here
  const options: any = {};

  // Chart data will go here
  const data: any = {};

  return (
    <div className="w-full h-[320px]"> {/* full width, fixed height */}
      <Line ref={chartRef} data={data} options={options} />
    </div>
  );
}

This sets up the basic component structure, imports the necessary modules, and registers the required Chart.js elements and the zoom plugin. The chartRef is crucial for accessing the chart instance and manipulating it directly. Props such as arr, time, yMin, and yMax are used to pass data and configuration to the chart.

Configuring Chart Options for Pan and Zoom

The options object in Chart.js is where you define the chart's behavior and appearance. For pan and zoom, you'll need to configure the plugins.zoom property. This section will cover the essential configurations for implementing pan and zoom functionalities.

To enable pan and zoom, you need to configure the zoom plugin within the options object. This involves setting limits, enabling zoom modes, and handling pan behavior. Let's break down the key configurations:

const options: any = {
  responsive: true,
  maintainAspectRatio: false, // height locked by container, never shrinks

  animation: false, // max performance

  interaction: {
    mode: "nearest",
    intersect: false,
  },

  scales: {
    x: {
      type: "linear",
      ticks: {
        maxTicksLimit: 10,
        maxRotation: 0,
        minRotation: 0,
        color: "var(--axis-color)", // Tailwind dark/light support
      },
    },

    y: {
      min: yMin, // lock Y-axis so zoom/pan never changes height
      max: yMax,
      ticks: {
        maxTicksLimit: 5,
        color: "var(--axis-color)",
      },
    },
  },

  plugins: {
    legend: {
      labels: {
        color: "var(--axis-color)",
      },
    },

    // -------------------------------------------------
    // 2) DECIMATION (MANDATORY for 1M points)
    // -------------------------------------------------
    decimation: {
      enabled: true,
      algorithm: "min-max",
      samples: 1000,
    },

    // -------------------------------------------------
    // 3) ZOOM PLUGIN CONFIG
    // -------------------------------------------------
    zoom: {
      limits: {
        x: {
          min: time[0],
          max: time[time.length - 1],
        },
        y: {
          min: yMin,
          max: yMax,
        },
      },

      pan: {
        enabled: false, // ❗ We disable built-in pan (we use arrow keys instead)
      },

      zoom: {
        wheel: { enabled: true }, // scroll wheel zoom
        pinch: { enabled: true }, // pinch zoom for touch
        mode: "x", // only zoom X by wheel, Y controlled manually later
        rangeMin: { x: time[0] },
        rangeMax: { x: time[time.length - 1] },
      },
    },
  },
};

• responsive: Set to true to make the chart responsive to its container size.
• maintainAspectRatio: Set to false to allow the chart's height to be determined by the container, ensuring it never shrinks.
• animation: Setting this to false can improve performance, especially with large datasets.
• interaction: Configures how interactions with the chart are handled. Setting mode to `