Shareable Views (Perspectives)

Premium feature

Shareable Views (Perspectives) is a Premium feature

Available on the Premium and OEM plans. It ships in the ApexCharts package as an opt-in import; add import 'apexcharts/features/perspectives' to enable it.

When you zoom a chart, hide a couple of series, and land on the exact view that tells the story, that state lives only in the browser. Reload the page and it is gone; send a colleague the link and they see the default view, not yours. Perspectives fixes that by making a view serializable. It captures the exact state of a chart, its zoom window, hidden series, selection, annotations, and theme, into a compact token. Drop that token in a URL and the identical view restores anywhere, which is what turns "look at what I'm looking at" into a link you can paste.

Where it is useful

  • "Copy link to this view" buttons. Let a user share the precise zoom and series set they are looking at.
  • Deep-linked dashboards. A link that opens the chart already zoomed to a quarter with only the relevant series showing.
  • Restore on reload. Persist the last view to storage or the URL so a refresh does not reset the user's exploration.
  • Saved-views menus. Let users name and revisit views ("Q3 zoom", "outliers only") like bookmarks.

It underpins scroll-driven storytelling too: Storyboard beats are Perspectives tokens under the hood. There is no inline demo here because a Perspective is about carrying state across loads and links; you can see one applied live in the Shareable views demo, and see tokens driving a narrative in Scrollytelling With ApexCharts Storyboard.

Enable the feature

import ApexCharts from 'apexcharts'
import 'apexcharts/features/perspectives'

Choose what gets serialized with chart.perspectives.serializeOptions in the chart config.

Capture, share, restore

const token = chart.perspectives.capture()   // a plain, serializable object
const url = chart.perspectives.toURL()        // current href with #apex=<token>
chart.perspectives.apply(token, { animate: true })

capture() returns the view; encode() / decode() convert between the object and a string; toURL() gives you a shareable link.

Named views

Save and list views by name for a "saved views" menu:

const id = chart.perspectives.save('Q3 zoom')
chart.perspectives.list()  // [{ id, name, token }]
chart.perspectives.delete(id)

Restore from a URL

Statics on the class read a view out of a link, so a page can restore the shared state on load:

const token = ApexCharts.perspectives.fromURL(location.href)
if (token) chart.perspectives.apply(token)

When to use Perspectives

Use Perspectives when a specific view is worth sharing or returning to: a dashboard link that opens on the same zoom and hidden-series set, a "copy link to this view" button, or restoring the last view on reload. For scroll-driven storytelling built on the same view tokens, see Storyboard.

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