Home > Docs > Shareable Views (Perspectives)

Shareable Views (Perspectives)

Perspectives is an opt-in import since 7.0

It is no longer part of the default bundle, so importing apexcharts alone does not include it. Add one line:

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

Or, without a bundler, a second script tag after the main one:

<script src=".../dist/features/perspectives.js"></script>

Or take every chart type and feature at once with apexcharts/full (apexcharts.full.min.js from a script tag). Without it, chart.perspectives and ApexCharts.perspectives are null, so the first call such as chart.perspectives.capture() throws, and nothing in the console names the import. See the v7 migration guide.

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.

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.