Select data granularity
On-Demand Data Loading
This demo shows a sample Stock chart setup which can load its data on-demand.
Try panning the chart chart, zooming, switching granularity. The code will gracefully handle loading missing data from the backend.
It relies on a few of the technologies implemented in amCharts 5:
- Incremental data loading
- CSV data loading and parsing
- Stacked axes
Related tutorials
- Incremental on-demand data loading (commentary about the code behind this demo)
- Stacked axes
- XY chart
Build this chart with AI
The prompt below can be used to build this chart with AI. For best coding results, use the most advanced AI models, like Claude Opus 4.6 and GPT-5.3-Codex. For more info and tips, check out amCharts AI docs.
Create a stock chart with on-demand data loading that fetches additional data as users navigate. Display two stacked panels: a taller one (about 70% of height) for candlestick price data and a shorter one (about 30%) for volume columns. Include three granularity buttons (1-hour, 1-day as default, 1-month) that switch data intervals. Load CSV data from an external source with fields: date, open, high, low, close, volume. Initially show 50 days of daily data from January 1, 2000. When panning left beyond existing data, automatically fetch earlier data; panning right loads more recent data. Enable horizontal pan, mouse wheel zoom, and pinch zoom. Add an XY cursor, horizontal scrollbar, and axis-header legends. Tooltips show OHLC values with color-coded percentage change (green/red/gray). Animate on load. Use amCharts 5 library.
Demo source