Zoom and Navigator

Zoom

zoom: { enabled: true } enables wheel zoom around the cursor, panning by dragging, and reset by double click. Right click (with contextMenu) opens a menu with PNG download and zoom reset.

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Zoom and pan' },
    subtitle: { text: 'wheel/pinch — zoom, drag — select area, alt+drag — pan, dblclick — reset' },
    series: [{ type: 'line', xField: 'index', yField: 'value', name: 'Value', marker: { enabled: false } }],
    axes: [
      { type: 'number', position: 'bottom', nice: false },
      { type: 'number', position: 'left' },
    ],
    zoom: { enabled: true, dragSelect: true, panKey: 'alt' },
    contextMenu: { enabled: true },
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const points = [];
  let value = 100;
  for (let i = 0; i < 120; i++) {
    value += Math.sin(i / 7) * 4 + ((i * 13) % 9) - 4;
    points.push({ index: i, value: Math.round(value * 10) / 10 });
  }
  return points;
}

Navigator

A strip below the plot area with a window of the visible range and handles:

Modular build

Zoom is part of the core, while when building with grafit-charts/core the navigator is a separate module: register(navigatorModule).

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Navigator' },
    subtitle: { text: 'the window and handles below control the visible range' },
    series: [{ type: 'area', xField: 'date', yField: 'value', name: 'Metric' }],
    axes: [
      { type: 'time', position: 'bottom' },
      { type: 'number', position: 'left' },
    ],
    navigator: { enabled: true, min: 0.6, max: 1 },
    zoom: { enabled: true },
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const start = Date.UTC(2024, 0, 1);
  const day = 24 * 60 * 60 * 1000;
  const points = [];
  let value = 50;
  for (let i = 0; i < 365; i++) {
    value += Math.sin(i / 30) * 1.5 + ((i * 7) % 5) - 2;
    points.push({ date: new Date(start + i * day), value: Math.round(value * 10) / 10 });
  }
  return points;
}

Option	Type	Default	Description
enabled	boolean	false	enable the navigator
sync.groupId	string	shared group	chart synchronization group
sync.nodeInteraction	boolean	true	synchronization of node highlighting
zoom.axes	'x' | 'y' | 'xy'	'x'	zoomable axes
zoom.wheelZoom	boolean	true	wheel zoom
zoom.wheelStep	number	0.1	zoom step per wheel tick
zoom.dragPan	boolean	true	panning by dragging
zoom.panKey	'alt' | 'ctrl' | 'shift' | 'meta'	—	pan modifier (without it, drag is box-zoom)
zoom.dragSelect	boolean	false	area selection → zoom
zoom.doubleClickReset	boolean	true	reset by double click
zoom.minRatio	number	0.05	minimum window width (fraction of the domain)
navigator.height	Pixels	24	navigator strip height
navigator.miniChart.enabled	boolean	true	series miniature in the strip
navigator.min	0..1	0	window start
navigator.max	0..1	1	window end

A pinch gesture on touch devices zooms around the gesture center. The navigator window and zoom are a single state: the wheel updates the navigator and vice versa. The current window is saved in the chart state.