# Zoom (`chartist-plugin-zoom`, Chartist plugin)

> Drag a box over a line chart to zoom into it, and reset the zoom from your own button.

It zooms auto and fixed scale axes, so the X axis needs one of them instead of the default step axis.

- Author: Hannes Kamecke
- Source: https://github.com/hansmaad/chartist-plugin-zoom, npm: https://www.npmjs.com/package/chartist-plugin-zoom
- License: WTFPL
- Written for the Chartist 0.x API; runs on v2 with `chartist/compat` (a script that reads the global `Chartist`, for backwards compatibility)
- Charts: line
- Server rendering: no, it needs a browser
- Downloads: 9140 a month, last release 2019-12-14

Setup:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/compat.min.js';
</script>
<script defer src="https://cdn.jsdelivr.net/npm/chartist-plugin-zoom@0.6.0/dist/chartist-plugin-zoom.js"></script>
<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.js';
  import { fromLegacyPlugin } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/compat.min.js';

  lineChart('#chart', data, {
    plugins: [fromLegacyPlugin(Chartist.plugins.zoom())]
  });
</script>
```

Example (`src/main.ts`):

```ts
import 'chartist/styles.css';
import './style.css';
import { lineChart, AutoScaleAxis } from 'chartist';
import { fromLegacyPlugin } from 'chartist/compat';

// Plugin scripts register on the global `Chartist`.
const { plugins } = Chartist;
const button = document.querySelector<HTMLButtonElement>('#reset')!;
let reset: (() => void) | undefined;

const points = Array.from({ length: 40 }, (_, x) => ({
  x,
  y: Math.round(10 + 8 * Math.sin(x / 4) + x / 3)
}));

lineChart(
  '#chart',
  { series: [points] },
  {
    // The plugin zooms auto and fixed scale axes, not the default step axis.
    axisX: { type: AutoScaleAxis, onlyInteger: true, scaleMinSpace: 40 },
    axisY: { type: AutoScaleAxis },
    plugins: [
      fromLegacyPlugin(
        plugins.zoom({
          onZoom: (_chart: unknown, resetZoom: () => void) => {
            reset = resetZoom;
            button.disabled = false;
          }
        })
      )
    ]
  }
);

button.addEventListener('click', () => {
  reset?.();
  button.disabled = true;
});
```

All plugins: https://chartist.dev/plugins.md