Navigation and viewport
The viewport is the window of time you see on screen — like scrolling a long timeline. Users drag to explore history; your app can also move the chart programmatically.
Drag inside the chart above to pan left and right through history. Zoom with the mouse wheel (when enabled). That is viewport navigation in action.
What users do vs what you code
| User action | What happens |
|---|---|
| Drag horizontally | Scroll to older or newer bars |
| Mouse wheel | Zoom in/out on time |
| Double-click / “Go to end” in UI | Jump to the latest bar |
With ChartUI, many of these controls are built in. With vanilla createChart, pan and zoom work on the chart surface by default.
Stable public API — stay on the latest bar
The simplest programmatic pattern: load data and scroll to the right edge:
await chart.setMainSeriesData(candles, interval, true);
// interval ──^ move to end ──^
The third argument true means “after load, show the newest candles.”
Live ticks also keep the flow natural:
chart.appendTick({
stamp: Date.now(),
price: candles[candles.length - 1].c,
v: 1200,
});
For many apps, setMainSeriesData(…, true) + appendTick is all the navigation you need.
Advanced: jump to a specific date
Need moveToEnd() or moveToStamp()? Those live on the runtime Chart class — not on the typed createChart() surface today:
import Chart from "@efixdata/exeria-chart";
const chart = new Chart({ container, instrument });
chart.init();
await chart.setMainSeriesData(candles, interval);
chart.moveToEnd(); // latest bar
chart.moveToStamp(candles[40].stamp); // jump to a known candle
Use this when you build custom “Go to earnings date” or “Back to live” buttons.
| Method | Effect |
|---|---|
moveToEnd() | Scroll so the rightmost data is visible |
moveToStamp(stamp) | Center viewport near that timestamp |
Short datasets stay anchored left (not enough bars to fill the screen). Long datasets scroll until the target is in view.
Return to live after exploring
chart.moveToStamp(candles[30].stamp); // user inspects old data
// …
chart.moveToEnd(); // “Back to live” button
Autoscale and navigation together
Turning autoscale on refits the price axis to visible candles — separate from horizontal scroll:
chart.setAutoScale(true);
Details: Autoscale and value axis.
Which layer should I use?
| Your need | Use |
|---|---|
| Load history + show latest | setMainSeriesData(data, interval, true) |
| Stream live prices | appendTick / appendTicks |
| Custom “jump to date” buttons | Runtime Chart → moveToStamp |
| “Back to live” button | Runtime Chart → moveToEnd |
Most integrators never leave createChart(). Drop to new Chart() only when product requirements need explicit viewport control.
What is next?
- Chart lifecycle — init before data
- Chart runtime access — full runtime API boundary
- ChartInstance reference — public methods list