Storyboard (Scrollytelling)

Storyboard drives a chart from the reader's scroll position (scrollytelling). You pair prose sections ("beats") with saved views; scrolling a beat past the viewport trigger applies its view, and scrolling back reverses it. Each beat can also merge an updateOptions payload, so it can restyle the chart or morph chart.type inside one animated transition.

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:

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.

When to use Storyboard

Use it for explanatory, narrative pages where the chart should reveal itself as the reader scrolls: a report walkthrough, a data story, an onboarding tour. 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. Try the Scrollytelling demo.

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