Storyboard (Scrollytelling)

Usually a chart is static and the reader does the work of finding what matters in it. Storyboard turns that around: the chart follows the reader down the page. You pair sections of prose (called beats) with saved chart views, and as each beat scrolls into view its view is applied, so the chart zooms to a window, hides a series, or even morphs to a different chart.type right as the reader reaches the paragraph that talks about it. Scroll back up and the transitions reverse. It is the "scrollytelling" pattern from data journalism, driven declaratively instead of with a pile of scroll listeners.

See it live

Scroll the story on the left of the demo below (or use the beat dots). Each beat is a saved view; reaching it applies that view in one animated transition, and scrolling back up reverses it.

For the full pattern, including how to structure the prose and choreograph morphs, see Scrollytelling With ApexCharts Storyboard.

Where it is useful

• Report walkthroughs. Guide a reader through a quarterly report, revealing each cut of the data as they scroll to it.
• Data stories. Explanatory articles where the chart is the narrative, not an illustration beside it.
• Onboarding and tours. Walk a new user through what a dashboard shows, one beat at a time.
• Guided analysis. Step an audience from the overview to a specific window to a single highlighted series, each step tied to a paragraph.

For a static chart the reader simply looks at, you do not need Storyboard. For view state you want to capture and share via a URL rather than scroll, see Perspectives.

Enable the feature

import ApexCharts from 'apexcharts'
import 'apexcharts/features/storyboard' // includes Perspectives

Storyboard builds on Perspectives: each beat's view is a perspective token, so importing Storyboard pulls Perspectives in automatically.

Bind beats to elements

Call chart.storyboard.bind() with a list of beats. Each beat has a selector for the prose element that triggers it and a view to apply; it may also carry an options payload merged via updateOptions, which is how a beat restyles the chart or morphs its type:

chart.storyboard.bind({
  beats: [
    { selector: '[data-apex-beat="1"]', view: { window: { xaxis: { min: 0, max: 10 } } } },
    { selector: '[data-apex-beat="2"]', view: { collapsed: [1] }, options: { chart: { type: 'area' } } },
  ],
})

Control it from code

chart.storyboard.goTo(beat)	Jump to a beat by index or key.
chart.storyboard.current()	The active beat, as { index, key }.
chart.storyboard.unbind()	Detach all beats and scroll listeners.

Crossing a beat boundary fires the beatChange event. Try the Scrollytelling demo.

Storyboard ships as a tree-shakeable entry point; see the tree-shaking guide.