Navigator

Adjust the visible X window using a full-domain overview. This feature belongs to @revolist/charts and can be used without Pivot or a grid.

Try it live

Drag either navigator handle to change the window, or drag the band to move it. The labels below the overview show its full domain and remain fixed when the selected window moves. Each handle exposes its selected value to assistive technology. Plot gestures and the navigator stay synchronized. Reset restores the full view.

The navigator is independent of plot-gesture opt-in: navigator: true can be used without enabling wheel/pan gestures. In this example both are enabled.

Loading chart…

Inspect live chart state

The chart uses the native Charts renderer. Buttons outside the plot are example application controls calling the public API.

Complete chart setup with sample data

Install Charts using the installation guide, then run this setup after the host mounts. The data is illustrative. Additional actions for this tool are explained below.

<div id="chart" style="width:100%;height:500px"></div>

import { createChartFactory } from '@revolist/charts/core';
import { lineChart } from '@revolist/charts/line';
import { groupedColumnChart } from '@revolist/charts/grouped-column';
import { columnLineChart } from '@revolist/charts/column-line';

const rows = [
  {
    "date": 1767225600000,
    "month": "Jan",
    "revenue": 65,
    "costs": 45
  },
  {
    "date": 1769904000000,
    "month": "Feb",
    "revenue": 82,
    "costs": 50
  },
  {
    "date": 1772323200000,
    "month": "Mar",
    "revenue": 76,
    "costs": 48
  },
  {
    "date": 1775001600000,
    "month": "Apr",
    "revenue": 95,
    "costs": 65
  },
  {
    "date": 1777593600000,
    "month": "May",
    "revenue": 110,
    "costs": 72
  },
  {
    "date": 1780272000000,
    "month": "Jun",
    "revenue": 102,
    "costs": 68
  },
  {
    "date": 1782864000000,
    "month": "Jul",
    "revenue": 121,
    "costs": 80
  },
  {
    "date": 1785542400000,
    "month": "Aug",
    "revenue": 115,
    "costs": 76
  },
  {
    "date": 1788220800000,
    "month": "Sep",
    "revenue": 135,
    "costs": 89
  },
  {
    "date": 1790812800000,
    "month": "Oct",
    "revenue": 128,
    "costs": 85
  },
  {
    "date": 1793491200000,
    "month": "Nov",
    "revenue": 145,
    "costs": 92
  },
  {
    "date": 1796083200000,
    "month": "Dec",
    "revenue": 155,
    "costs": 100
  }
];
const mapping = {
  "category": {
    "field": "date",
    "label": "month"
  },
  "series": [
    {
      "field": "revenue",
      "label": "Revenue"
    },
    {
      "field": "costs",
      "label": "Costs"
    }
  ]
};
const createChart = createChartFactory([lineChart, groupedColumnChart, columnLineChart]);
const container = document.getElementById('chart')!;
const chart = await createChart({
  container,
  data: rows,
  mapping,
  "chartType": "line",
  "axes": {
    "x": {
      "scale": "time"
    }
  },
  "presentation": {
    "title": "Monthly performance",
    "subtitle": "Illustrative data · 2026",
    "legendPosition": "bottom"
  },
  "interaction": {
    "mode": "select",
    "selectionMode": "multiple"
  },
  "navigation": {
    "enabled": true,
    "navigator": true
  }
});

// When the host unmounts:
// chart.destroy();

Select a range without navigating

For a range directly on the main plot, see Axis range selection. It uses the same handles and gestures but keeps the viewport unchanged. A navigator is a compact chart whose range events update the main chart’s viewport.

The built-in navigator defaults to one visible series (the bound close measure on financial charts), a blue accent area, 35% selected opacity and 10% unselected opacity. Its height, series, chart style, colors, lines and selection appearance are configurable.

API and configuration

await chart.update({ navigation: { enabled: true, navigator: true } });
await chart.update({ viewport: {
  x: { scale: 'time', min: Date.UTC(2026, 3, 1), max: Date.UTC(2026, 8, 1) },
} });

Support and behavior

Requires a native navigation-capable type with a supported X scale. Numeric XY navigators adjust X and retain the current Y window. Async sources can supply separate overview data; that overview never replaces detail data used for tooltips or exports.

State and cleanup

Authored settings are available through chart.model. Updates replace whole settings objects: spread fields you want to retain, and await the returned promise before reading state or exporting. Destroy the controller when its host unmounts.

All chart tools · Chart types · Data & Configuration

Named axes and heatmaps

Set navigation.xAxis to a declared named X ID to choose the navigator, plot-gesture and toolbar target. It defaults to primary; reset preserves other X windows. rangeSelection.xAxis is independent. See named X axes.

Heatmaps use a full-matrix overview with separate row and column tracks. Their navigator height defaults to 96px (ordinary overviews default to 42px). Matrix navigator objects support height and basic selectionStyle paint/handle fields; line types, subset series, custom overview colors, opacity veils and handle grips reject. See heatmap windows and gestures.