chartjs-plugin-zoom

What is chartjs-plugin-zoom?

The chartjs-plugin-zoom package is a plugin for Chart.js that enables zooming and panning functionalities for charts. It allows users to interact with charts by zooming in and out, as well as panning across the chart area to explore data in more detail.

What are chartjs-plugin-zoom's main functionalities?

Zooming

This feature allows users to zoom in and out of the chart using the mouse wheel or pinch gestures. The 'mode' option can be set to 'x', 'y', or 'xy' to control the zooming direction.

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true
          },
          pinch: {
            enabled: true
          },
          mode: 'xy'
        }
      }
    }
  }
});

Panning

This feature allows users to pan across the chart area by clicking and dragging. The 'mode' option can be set to 'x', 'y', or 'xy' to control the panning direction.

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'xy'
        }
      }
    }
  }
});

Reset Zoom

This feature allows users to reset the zoom level to the original state. A button can be added to the UI to trigger the resetZoom method.

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true
          },
          pinch: {
            enabled: true
          },
          mode: 'xy'
        }
      }
    }
  }
});

// Reset zoom button
const resetZoomButton = document.getElementById('resetZoom');
resetZoomButton.addEventListener('click', function() {
  chart.resetZoom();
});

Other packages similar to chartjs-plugin-zoom

chartjs-plugin-dragdata

The chartjs-plugin-dragdata package allows users to drag data points on a Chart.js chart to update the data values. While it provides interactivity similar to chartjs-plugin-zoom, it focuses on modifying data points rather than zooming and panning.

chartjs-plugin-annotation

The chartjs-plugin-annotation package enables the addition of annotations to Chart.js charts. It allows users to highlight specific areas or points on the chart. While it enhances chart interactivity, it does not provide zooming or panning functionalities like chartjs-plugin-zoom.

chartjs-plugin-crosshair

The chartjs-plugin-crosshair package adds a crosshair to Chart.js charts, allowing users to see the exact values of data points as they hover over the chart. It enhances data exploration but does not offer zooming or panning capabilities.

README

chartjs-plugin-zoom

A zoom and pan plugin for Chart.js >= 3.0.0

For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin.

Panning can be done via the mouse or with a finger. Zooming is done via the mouse wheel or via a pinch gesture. Hammer.js is used for gesture recognition.

Documentation

You can find documentation for chartjs-plugin-zoom at www.chartjs.org/chartjs-plugin-zoom.

Prior to v0.4.0, this plugin was known as 'Chart.Zoom.js'. Old versions are still available on npm under that name.

Contributing

Before submitting an issue or a pull request to the project, please take a moment to look over the contributing guidelines first.

License

chartjs-plugin-zoom.js is available under the MIT license.