Shareable views
Named views set the zoom window and hidden series; the current view becomes a share token, and a link with the token restores it.
Open the chart without page chrome ↗
const options = {
chart: {
height: 360,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "line",
id: "views",
zoom: {
enabled: true
}
},
series: [
{
name: "North",
data: [
[1767571200000, 99.6],
[1768176000000, 101.1],
[1768780800000, 101.2],
[1769385600000, 101],
[1769990400000, 99.2],
[1770595200000, 99.2],
[1771200000000, 101.2],
[1771804800000, 103.1],
[1772409600000, 104.3],
[1773014400000, 103.1],
[1773619200000, 103.7],
[1774224000000, 103],
[1774828800000, 101.4],
[1775433600000, 100.4],
[1776038400000, 102.2],
[1776643200000, 104.2],
[1777248000000, 103.3],
[1777852800000, 102.1],
[1778457600000, 100.7],
[1779062400000, 102.1],
[1779667200000, 100.3],
[1780272000000, 98.6],
[1780876800000, 100],
[1781481600000, 101.7],
[1782086400000, 101.3],
[1782691200000, 101.8],
[1783296000000, 103.6],
[1783900800000, 104.1],
[1784505600000, 103.8],
[1785110400000, 103.1],
[1785715200000, 104.3],
[1786320000000, 104],
[1786924800000, 103.5],
[1787529600000, 104.5],
[1788134400000, 106.3],
[1788739200000, 105.2],
[1789344000000, 105.1],
[1789948800000, 106.8],
[1790553600000, 105.7],
[1791158400000, 104.7],
[1791763200000, 105.5],
[1792368000000, 107.6],
[1792972800000, 107.6],
[1793577600000, 107.4],
[1794182400000, 109.4],
[1794787200000, 107.7],
[1795392000000, 108.1],
[1795996800000, 109.1],
[1796601600000, 108.5],
[1797206400000, 108.9],
[1797811200000, 108.2],
[1798416000000, 108]
]
},
{
name: "South",
data: [
[1767571200000, 112.4],
[1768176000000, 114.1],
[1768780800000, 112.5],
[1769385600000, 110.7],
[1769990400000, 111.6],
[1770595200000, 112.8],
[1771200000000, 112.3],
[1771804800000, 112],
[1772409600000, 111.8],
[1773014400000, 111.3],
[1773619200000, 111.6],
[1774224000000, 112.6],
[1774828800000, 113.6],
[1775433600000, 113.3],
[1776038400000, 111.8],
[1776643200000, 113.5],
[1777248000000, 115.1],
[1777852800000, 113.4],
[1778457600000, 113.4],
[1779062400000, 115.4],
[1779667200000, 117.3],
[1780272000000, 117.1],
[1780876800000, 115.6],
[1781481600000, 117],
[1782086400000, 116.4],
[1782691200000, 116.5],
[1783296000000, 117.4],
[1783900800000, 116.7],
[1784505600000, 116.5],
[1785110400000, 117.1],
[1785715200000, 117.2],
[1786320000000, 117.7],
[1786924800000, 117.7],
[1787529600000, 118.5],
[1788134400000, 116.6],
[1788739200000, 117.3],
[1789344000000, 118.7],
[1789948800000, 119.9],
[1790553600000, 121.2],
[1791158400000, 122.4],
[1791763200000, 123.4],
[1792368000000, 124.3],
[1792972800000, 124.2],
[1793577600000, 125],
[1794182400000, 126.8],
[1794787200000, 126.8],
[1795392000000, 126],
[1795996800000, 126.9],
[1796601600000, 127],
[1797206400000, 127.2],
[1797811200000, 128.2],
[1798416000000, 130.1]
]
},
{
name: "East",
data: [
[1767571200000, 122.1],
[1768176000000, 120.7],
[1768780800000, 122],
[1769385600000, 123.7],
[1769990400000, 123.8],
[1770595200000, 123.9],
[1771200000000, 122.3],
[1771804800000, 122.3],
[1772409600000, 124.4],
[1773014400000, 122.9],
[1773619200000, 121.1],
[1774224000000, 121.6],
[1774828800000, 121.9],
[1775433600000, 122.5],
[1776038400000, 123.1],
[1776643200000, 125.2],
[1777248000000, 126.7],
[1777852800000, 128.3],
[1778457600000, 129.6],
[1779062400000, 129.4],
[1779667200000, 130.7],
[1780272000000, 130.9],
[1780876800000, 129.7],
[1781481600000, 131],
[1782086400000, 131.8],
[1782691200000, 132.6],
[1783296000000, 133.9],
[1783900800000, 133.5],
[1784505600000, 132.9],
[1785110400000, 131.1],
[1785715200000, 133.1],
[1786320000000, 134.8],
[1786924800000, 135.5],
[1787529600000, 136.4],
[1788134400000, 136.4],
[1788739200000, 135.3],
[1789344000000, 133.9],
[1789948800000, 134.1],
[1790553600000, 134.5],
[1791158400000, 136.4],
[1791763200000, 135.7],
[1792368000000, 134],
[1792972800000, 134.3],
[1793577600000, 135],
[1794182400000, 136.6],
[1794787200000, 135.1],
[1795392000000, 134.6],
[1795996800000, 133.3],
[1796601600000, 132.9],
[1797206400000, 132.6],
[1797811200000, 132.8],
[1798416000000, 132.5]
]
},
{
name: "West",
data: [
[1767571200000, 136],
[1768176000000, 135.3],
[1768780800000, 133.4],
[1769385600000, 132.1],
[1769990400000, 131],
[1770595200000, 132.3],
[1771200000000, 130.5],
[1771804800000, 129.9],
[1772409600000, 129.4],
[1773014400000, 128.6],
[1773619200000, 128.6],
[1774224000000, 127.5],
[1774828800000, 129.2],
[1775433600000, 128.9],
[1776038400000, 129.8],
[1776643200000, 129.9],
[1777248000000, 131],
[1777852800000, 130.4],
[1778457600000, 129.9],
[1779062400000, 128.5],
[1779667200000, 129],
[1780272000000, 130.6],
[1780876800000, 131],
[1781481600000, 131.3],
[1782086400000, 130.4],
[1782691200000, 129.5],
[1783296000000, 131.1],
[1783900800000, 129.7],
[1784505600000, 129.6],
[1785110400000, 130],
[1785715200000, 129.5],
[1786320000000, 129.4],
[1786924800000, 129.2],
[1787529600000, 128.4],
[1788134400000, 127.1],
[1788739200000, 128],
[1789344000000, 129.4],
[1789948800000, 127.8],
[1790553600000, 127],
[1791158400000, 126.2],
[1791763200000, 125.9],
[1792368000000, 125.8],
[1792972800000, 123.9],
[1793577600000, 125.9],
[1794182400000, 127],
[1794787200000, 127.5],
[1795392000000, 125.6],
[1795996800000, 127.5],
[1796601600000, 125.6],
[1797206400000, 124.3],
[1797811200000, 125.3],
[1798416000000, 127.3]
]
},
{
name: "Central",
data: [
[1767571200000, 149.3],
[1768176000000, 150.4],
[1768780800000, 152.1],
[1769385600000, 152.2],
[1769990400000, 150.8],
[1770595200000, 152.4],
[1771200000000, 153.2],
[1771804800000, 155.3],
[1772409600000, 156.5],
[1773014400000, 156.9],
[1773619200000, 158.8],
[1774224000000, 160.7],
[1774828800000, 162.3],
[1775433600000, 160.4],
[1776038400000, 159.3],
[1776643200000, 158],
[1777248000000, 160],
[1777852800000, 159.5],
[1778457600000, 159],
[1779062400000, 159.7],
[1779667200000, 158.5],
[1780272000000, 160.3],
[1780876800000, 162.3],
[1781481600000, 163],
[1782086400000, 164.7],
[1782691200000, 165.5],
[1783296000000, 166.2],
[1783900800000, 164.4],
[1784505600000, 165.7],
[1785110400000, 163.9],
[1785715200000, 163.9],
[1786320000000, 165.6],
[1786924800000, 166.1],
[1787529600000, 166.6],
[1788134400000, 168],
[1788739200000, 170.1],
[1789344000000, 170.8],
[1789948800000, 171.2],
[1790553600000, 172.1],
[1791158400000, 172.1],
[1791763200000, 171.4],
[1792368000000, 169.9],
[1792972800000, 169.1],
[1793577600000, 168.2],
[1794182400000, 166.4],
[1794787200000, 166.3],
[1795392000000, 166.5],
[1795996800000, 166],
[1796601600000, 164.7],
[1797206400000, 166.4],
[1797811200000, 165.7],
[1798416000000, 164.3]
]
}
],
xaxis: {
type: "datetime"
},
stroke: {
width: 2
},
title: {
text: "Weekly revenue index"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import perspectives from 'west-coast-charts/features/perspectives'
WestCoastCharts.use(types).use(perspectives)
const options = {
chart: {
height: 360,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "line",
id: "views",
zoom: {
enabled: true
}
},
series: [
{
name: "North",
data: [
[1767571200000, 99.6],
[1768176000000, 101.1],
[1768780800000, 101.2],
[1769385600000, 101],
[1769990400000, 99.2],
[1770595200000, 99.2],
[1771200000000, 101.2],
[1771804800000, 103.1],
[1772409600000, 104.3],
[1773014400000, 103.1],
[1773619200000, 103.7],
[1774224000000, 103],
[1774828800000, 101.4],
[1775433600000, 100.4],
[1776038400000, 102.2],
[1776643200000, 104.2],
[1777248000000, 103.3],
[1777852800000, 102.1],
[1778457600000, 100.7],
[1779062400000, 102.1],
[1779667200000, 100.3],
[1780272000000, 98.6],
[1780876800000, 100],
[1781481600000, 101.7],
[1782086400000, 101.3],
[1782691200000, 101.8],
[1783296000000, 103.6],
[1783900800000, 104.1],
[1784505600000, 103.8],
[1785110400000, 103.1],
[1785715200000, 104.3],
[1786320000000, 104],
[1786924800000, 103.5],
[1787529600000, 104.5],
[1788134400000, 106.3],
[1788739200000, 105.2],
[1789344000000, 105.1],
[1789948800000, 106.8],
[1790553600000, 105.7],
[1791158400000, 104.7],
[1791763200000, 105.5],
[1792368000000, 107.6],
[1792972800000, 107.6],
[1793577600000, 107.4],
[1794182400000, 109.4],
[1794787200000, 107.7],
[1795392000000, 108.1],
[1795996800000, 109.1],
[1796601600000, 108.5],
[1797206400000, 108.9],
[1797811200000, 108.2],
[1798416000000, 108]
]
},
{
name: "South",
data: [
[1767571200000, 112.4],
[1768176000000, 114.1],
[1768780800000, 112.5],
[1769385600000, 110.7],
[1769990400000, 111.6],
[1770595200000, 112.8],
[1771200000000, 112.3],
[1771804800000, 112],
[1772409600000, 111.8],
[1773014400000, 111.3],
[1773619200000, 111.6],
[1774224000000, 112.6],
[1774828800000, 113.6],
[1775433600000, 113.3],
[1776038400000, 111.8],
[1776643200000, 113.5],
[1777248000000, 115.1],
[1777852800000, 113.4],
[1778457600000, 113.4],
[1779062400000, 115.4],
[1779667200000, 117.3],
[1780272000000, 117.1],
[1780876800000, 115.6],
[1781481600000, 117],
[1782086400000, 116.4],
[1782691200000, 116.5],
[1783296000000, 117.4],
[1783900800000, 116.7],
[1784505600000, 116.5],
[1785110400000, 117.1],
[1785715200000, 117.2],
[1786320000000, 117.7],
[1786924800000, 117.7],
[1787529600000, 118.5],
[1788134400000, 116.6],
[1788739200000, 117.3],
[1789344000000, 118.7],
[1789948800000, 119.9],
[1790553600000, 121.2],
[1791158400000, 122.4],
[1791763200000, 123.4],
[1792368000000, 124.3],
[1792972800000, 124.2],
[1793577600000, 125],
[1794182400000, 126.8],
[1794787200000, 126.8],
[1795392000000, 126],
[1795996800000, 126.9],
[1796601600000, 127],
[1797206400000, 127.2],
[1797811200000, 128.2],
[1798416000000, 130.1]
]
},
{
name: "East",
data: [
[1767571200000, 122.1],
[1768176000000, 120.7],
[1768780800000, 122],
[1769385600000, 123.7],
[1769990400000, 123.8],
[1770595200000, 123.9],
[1771200000000, 122.3],
[1771804800000, 122.3],
[1772409600000, 124.4],
[1773014400000, 122.9],
[1773619200000, 121.1],
[1774224000000, 121.6],
[1774828800000, 121.9],
[1775433600000, 122.5],
[1776038400000, 123.1],
[1776643200000, 125.2],
[1777248000000, 126.7],
[1777852800000, 128.3],
[1778457600000, 129.6],
[1779062400000, 129.4],
[1779667200000, 130.7],
[1780272000000, 130.9],
[1780876800000, 129.7],
[1781481600000, 131],
[1782086400000, 131.8],
[1782691200000, 132.6],
[1783296000000, 133.9],
[1783900800000, 133.5],
[1784505600000, 132.9],
[1785110400000, 131.1],
[1785715200000, 133.1],
[1786320000000, 134.8],
[1786924800000, 135.5],
[1787529600000, 136.4],
[1788134400000, 136.4],
[1788739200000, 135.3],
[1789344000000, 133.9],
[1789948800000, 134.1],
[1790553600000, 134.5],
[1791158400000, 136.4],
[1791763200000, 135.7],
[1792368000000, 134],
[1792972800000, 134.3],
[1793577600000, 135],
[1794182400000, 136.6],
[1794787200000, 135.1],
[1795392000000, 134.6],
[1795996800000, 133.3],
[1796601600000, 132.9],
[1797206400000, 132.6],
[1797811200000, 132.8],
[1798416000000, 132.5]
]
},
{
name: "West",
data: [
[1767571200000, 136],
[1768176000000, 135.3],
[1768780800000, 133.4],
[1769385600000, 132.1],
[1769990400000, 131],
[1770595200000, 132.3],
[1771200000000, 130.5],
[1771804800000, 129.9],
[1772409600000, 129.4],
[1773014400000, 128.6],
[1773619200000, 128.6],
[1774224000000, 127.5],
[1774828800000, 129.2],
[1775433600000, 128.9],
[1776038400000, 129.8],
[1776643200000, 129.9],
[1777248000000, 131],
[1777852800000, 130.4],
[1778457600000, 129.9],
[1779062400000, 128.5],
[1779667200000, 129],
[1780272000000, 130.6],
[1780876800000, 131],
[1781481600000, 131.3],
[1782086400000, 130.4],
[1782691200000, 129.5],
[1783296000000, 131.1],
[1783900800000, 129.7],
[1784505600000, 129.6],
[1785110400000, 130],
[1785715200000, 129.5],
[1786320000000, 129.4],
[1786924800000, 129.2],
[1787529600000, 128.4],
[1788134400000, 127.1],
[1788739200000, 128],
[1789344000000, 129.4],
[1789948800000, 127.8],
[1790553600000, 127],
[1791158400000, 126.2],
[1791763200000, 125.9],
[1792368000000, 125.8],
[1792972800000, 123.9],
[1793577600000, 125.9],
[1794182400000, 127],
[1794787200000, 127.5],
[1795392000000, 125.6],
[1795996800000, 127.5],
[1796601600000, 125.6],
[1797206400000, 124.3],
[1797811200000, 125.3],
[1798416000000, 127.3]
]
},
{
name: "Central",
data: [
[1767571200000, 149.3],
[1768176000000, 150.4],
[1768780800000, 152.1],
[1769385600000, 152.2],
[1769990400000, 150.8],
[1770595200000, 152.4],
[1771200000000, 153.2],
[1771804800000, 155.3],
[1772409600000, 156.5],
[1773014400000, 156.9],
[1773619200000, 158.8],
[1774224000000, 160.7],
[1774828800000, 162.3],
[1775433600000, 160.4],
[1776038400000, 159.3],
[1776643200000, 158],
[1777248000000, 160],
[1777852800000, 159.5],
[1778457600000, 159],
[1779062400000, 159.7],
[1779667200000, 158.5],
[1780272000000, 160.3],
[1780876800000, 162.3],
[1781481600000, 163],
[1782086400000, 164.7],
[1782691200000, 165.5],
[1783296000000, 166.2],
[1783900800000, 164.4],
[1784505600000, 165.7],
[1785110400000, 163.9],
[1785715200000, 163.9],
[1786320000000, 165.6],
[1786924800000, 166.1],
[1787529600000, 166.6],
[1788134400000, 168],
[1788739200000, 170.1],
[1789344000000, 170.8],
[1789948800000, 171.2],
[1790553600000, 172.1],
[1791158400000, 172.1],
[1791763200000, 171.4],
[1792368000000, 169.9],
[1792972800000, 169.1],
[1793577600000, 168.2],
[1794182400000, 166.4],
[1794787200000, 166.3],
[1795392000000, 166.5],
[1795996800000, 166],
[1796601600000, 164.7],
[1797206400000, 166.4],
[1797811200000, 165.7],
[1798416000000, 164.3]
]
}
],
xaxis: {
type: "datetime"
},
stroke: {
width: 2
},
title: {
text: "Weekly revenue index"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export narrative-state-shareable-views.json --out narrative-state-shareable-views.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/narrative-state/shareable-views/index.md …