Charts - Navigator

#Usage

import { ChartNavigator, ChartSvg, ChartZoom } from '@primeui/vue-chart';

<ChartSvg>
    <!-- series and axes -->
    <ChartZoom />
    <ChartNavigator />
</ChartSvg>

The navigator renders a compact overview of the full dataset below the main chart with a draggable selection window. It shares zoom state with ChartZoom: dragging the navigator handle updates the main chart and vice versa. Add both components together for the full zoom-and-navigate experience.

#Basic

Add ChartNavigator alongside ChartZoom to display a compact overview of the full dataset below the main chart. Drag the selection window to pan, drag its edges to resize, and click outside the window to jump to a position. The navigator and zoom share the same zoom state. Dragging the navigator handle updates the main chart and vice versa.

#Series

By default the navigator displays the first registered series as a filled area chart. Set series to a dataset ID to pin the navigator to a specific series. Pass an array of IDs to show multiple series. The first drives the X axis and gets the filled area treatment; remaining series appear as lines on a shared Y scale.

#Height & Gap

Set height to control how tall the navigator area is. Set gap to adjust the spacing between the main chart and the navigator.

#Styling

Set color and opacity to customize the mini area chart fill. Use selectionColor and selectionFill to style the selection window border and interior. Use maskColor to control the dimmed regions outside the selection. Set backgroundColor to set the navigator background and gridColor to adjust the grid line color. All navigator colors default to the active chart theme and adapt to dark mode automatically; override any of them to take manual control.

#API

#ChartNavigator

#Related Docs

• Zoom & Pan
• Line & Area
• Candlestick & OHLC
• Performance