Chart Navigation

Built-in zoom and scroll controls at the bottom center of each chart. Pan and zoom with the mouse or touch on the chart itself (chart engine behavior).

Usage

The navigation bar has five buttons:

Button	Action	Description
−	Zoom out	Show more bars
+	Zoom in	Show fewer bars with more detail
←	Move left	Scroll ~25% of the visible range toward older data
→	Move right	Scroll ~25% of the visible range toward newer data
⟲	Reset	Restore initial bar spacing, scroll to latest bar, reset Y-axis auto-scale

Controls appear per chart when enabled.

Configuration

Option	Type	Default	Description
chartNavigationEnabled	boolean	true	Show/hide bottom-center navigation controls

new ChartSpire({
  chartNavigationEnabled: true,
  // ...
})

See Widget API — Constructor for all options.

Navigation via API

Programmatic scroll and zoom use Chart API methods on a chart handle:

chartspire.getActiveChart()?.scrollToRealTime()
chartspire.getActiveChart()?.scrollToTimestamp(1649962800000)
chartspire.getActiveChart()?.scrollByDistance(100)
chartspire.getActiveChart()?.zoomAtDataIndex(1.2, 100)
chartspire.getActiveChart()?.zoomAtTimestamp(1.3, 1649962800000, 200)

See Chart API — Scroll and zoom.

Reset behavior

The ⟲ button restores the view from when the chart first loaded:

• X-axis — Original bar spacing and scroll to the latest bar
• Y-axis — Auto-scale reset for all Y axes on the chart

Related

• Chart API — Scroll and zoom — programmatic navigation
• Widget API — chartNavigationEnabled
• Synchronization — Time Sync — click a chart to align time across multichart
• Multi-Chart — per-chart navigation controls