Line Chart with Scroll and Zoom
Having the whole chart overview while zooming into parts of it and panning around is a powerful user experience aid. amCharts comes with advanced scrollbars to make this functionality a breeze to impelemnt.
Key implementation details
We add an XYChartScrollbar as an X-axis scrollbar in our chart. This allows us to display an XY Chart inside the scrollbar. Then we just set it up like our usual line chart. amCharts handles the rest.
Related tutorials
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 line chart with 2,000 daily data points featuring a scrollbar with an embedded miniature chart preview. Display circular bullets at each visible point. Add interactive controls for stroke width, bullet size, and line smoothness. Include minor grid lines, an XY cursor with horizontal crosshair, tooltips, and pan/zoom. Animate on load. Use amCharts 5 library.
Demo source