Storyboard lab
Scroll inside the card: each text block moves the chart to its view.
Open the chart without page chrome ↗
const options = {
chart: {
height: 480,
type: "area",
stacked: true,
zoom: {
enabled: true
},
toolbar: {
show: false
}
},
stroke: {
curve: "smooth",
width: 1.6
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
opacityFrom: 0.5,
opacityTo: 0.08
}
},
xaxis: {
type: "datetime"
},
legend: {
position: "top",
horizontalAlign: "left"
},
series: [
{
name: "Subscribers",
data: [
[1736121600000, 4202],
[1736726400000, 4316],
[1737331200000, 4316],
[1737936000000, 4455],
[1738540800000, 4717],
[1739145600000, 4440],
[1739750400000, 4638],
[1740355200000, 4648],
[1740960000000, 4813],
[1741564800000, 4639],
[1742169600000, 4953],
[1742774400000, 4841],
[1743379200000, 4907],
[1743984000000, 5022],
[1744588800000, 4937],
[1745193600000, 4989],
[1745798400000, 4992],
[1746403200000, 5219],
[1747008000000, 5231],
[1747612800000, 5278],
[1748217600000, 5107],
[1748822400000, 5235],
[1749427200000, 5277],
[1750032000000, 5435],
[1750636800000, 5291],
[1751241600000, 5311],
[1751846400000, 5362],
[1752451200000, 5262],
[1753056000000, 5352],
[1753660800000, 5616],
[1754265600000, 5461],
[1754870400000, 5465],
[1755475200000, 5768],
[1756080000000, 5788],
[1756684800000, 5848],
[1757289600000, 5544],
[1757894400000, 5781],
[1758499200000, 5884],
[1759104000000, 5658],
[1759708800000, 6012],
[1760313600000, 6081],
[1760918400000, 5926],
[1761523200000, 5989],
[1762128000000, 5970],
[1762732800000, 5959],
[1763337600000, 6091],
[1763942400000, 6244],
[1764547200000, 6145],
[1765152000000, 6364],
[1765756800000, 6097],
[1766361600000, 6315],
[1766966400000, 6213],
[1767571200000, 6461],
[1768176000000, 6443],
[1768780800000, 6309],
[1769385600000, 6433],
[1769990400000, 6337],
[1770595200000, 6548],
[1771200000000, 6577],
[1771804800000, 6464],
[1772409600000, 6828],
[1773014400000, 6523],
[1773619200000, 6616],
[1774224000000, 6932],
[1774828800000, 6868],
[1775433600000, 6982],
[1776038400000, 7010],
[1776643200000, 6936],
[1777248000000, 6941],
[1777852800000, 6937],
[1778457600000, 6879],
[1779062400000, 7080],
[1779667200000, 7047],
[1780272000000, 6988],
[1780876800000, 7245],
[1781481600000, 7382],
[1782086400000, 7142],
[1782691200000, 7474],
[1783296000000, 7429],
[1783900800000, 7373],
[1784505600000, 7321],
[1785110400000, 7433],
[1785715200000, 7441],
[1786320000000, 7707],
[1786924800000, 7631],
[1787529600000, 7489]
]
},
{
name: "Casual",
data: [
[1736121600000, 623],
[1736726400000, 923],
[1737331200000, 889],
[1737936000000, 810],
[1738540800000, 696],
[1739145600000, 606],
[1739750400000, 969],
[1740355200000, 1007],
[1740960000000, 748],
[1741564800000, 764],
[1742169600000, 693],
[1742774400000, 1027],
[1743379200000, 730],
[1743984000000, 981],
[1744588800000, 1397],
[1745193600000, 1987],
[1745798400000, 2313],
[1746403200000, 3018],
[1747008000000, 3433],
[1747612800000, 3738],
[1748217600000, 4278],
[1748822400000, 4727],
[1749427200000, 4807],
[1750032000000, 5061],
[1750636800000, 5224],
[1751241600000, 5378],
[1751846400000, 5656],
[1752451200000, 5218],
[1753056000000, 5320],
[1753660800000, 5033],
[1754265600000, 4743],
[1754870400000, 4540],
[1755475200000, 4208],
[1756080000000, 3821],
[1756684800000, 3563],
[1757289600000, 2915],
[1757894400000, 2397],
[1758499200000, 2154],
[1759104000000, 1596],
[1759708800000, 865],
[1760313600000, 973],
[1760918400000, 805],
[1761523200000, 878],
[1762128000000, 964],
[1762732800000, 696],
[1763337600000, 925],
[1763942400000, 1005],
[1764547200000, 803],
[1765152000000, 989],
[1765756800000, 731],
[1766361600000, 749],
[1766966400000, 917],
[1767571200000, 722],
[1768176000000, 606],
[1768780800000, 857],
[1769385600000, 776],
[1769990400000, 663],
[1770595200000, 657],
[1771200000000, 614],
[1771804800000, 906],
[1772409600000, 697],
[1773014400000, 1063],
[1773619200000, 1051],
[1774224000000, 888],
[1774828800000, 876],
[1775433600000, 985],
[1776038400000, 1798],
[1776643200000, 2165],
[1777248000000, 2792],
[1777852800000, 3906],
[1778457600000, 4293],
[1779062400000, 4657],
[1779667200000, 5171],
[1780272000000, 6114],
[1780876800000, 6288],
[1781481600000, 6397],
[1782086400000, 6771],
[1782691200000, 7118],
[1783296000000, 6724],
[1783900800000, 6956],
[1784505600000, 6717],
[1785110400000, 6479],
[1785715200000, 6100],
[1786320000000, 6027],
[1786924800000, 5633],
[1787529600000, 4719]
]
}
],
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import perspectives from 'west-coast-charts/features/perspectives'
import storyboard from 'west-coast-charts/features/storyboard'
WestCoastCharts.use(perspectives).use(storyboard)
const options = {
chart: {
height: 480,
type: "area",
stacked: true,
zoom: {
enabled: true
},
toolbar: {
show: false
}
},
stroke: {
curve: "smooth",
width: 1.6
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
opacityFrom: 0.5,
opacityTo: 0.08
}
},
xaxis: {
type: "datetime"
},
legend: {
position: "top",
horizontalAlign: "left"
},
series: [
{
name: "Subscribers",
data: [
[1736121600000, 4202],
[1736726400000, 4316],
[1737331200000, 4316],
[1737936000000, 4455],
[1738540800000, 4717],
[1739145600000, 4440],
[1739750400000, 4638],
[1740355200000, 4648],
[1740960000000, 4813],
[1741564800000, 4639],
[1742169600000, 4953],
[1742774400000, 4841],
[1743379200000, 4907],
[1743984000000, 5022],
[1744588800000, 4937],
[1745193600000, 4989],
[1745798400000, 4992],
[1746403200000, 5219],
[1747008000000, 5231],
[1747612800000, 5278],
[1748217600000, 5107],
[1748822400000, 5235],
[1749427200000, 5277],
[1750032000000, 5435],
[1750636800000, 5291],
[1751241600000, 5311],
[1751846400000, 5362],
[1752451200000, 5262],
[1753056000000, 5352],
[1753660800000, 5616],
[1754265600000, 5461],
[1754870400000, 5465],
[1755475200000, 5768],
[1756080000000, 5788],
[1756684800000, 5848],
[1757289600000, 5544],
[1757894400000, 5781],
[1758499200000, 5884],
[1759104000000, 5658],
[1759708800000, 6012],
[1760313600000, 6081],
[1760918400000, 5926],
[1761523200000, 5989],
[1762128000000, 5970],
[1762732800000, 5959],
[1763337600000, 6091],
[1763942400000, 6244],
[1764547200000, 6145],
[1765152000000, 6364],
[1765756800000, 6097],
[1766361600000, 6315],
[1766966400000, 6213],
[1767571200000, 6461],
[1768176000000, 6443],
[1768780800000, 6309],
[1769385600000, 6433],
[1769990400000, 6337],
[1770595200000, 6548],
[1771200000000, 6577],
[1771804800000, 6464],
[1772409600000, 6828],
[1773014400000, 6523],
[1773619200000, 6616],
[1774224000000, 6932],
[1774828800000, 6868],
[1775433600000, 6982],
[1776038400000, 7010],
[1776643200000, 6936],
[1777248000000, 6941],
[1777852800000, 6937],
[1778457600000, 6879],
[1779062400000, 7080],
[1779667200000, 7047],
[1780272000000, 6988],
[1780876800000, 7245],
[1781481600000, 7382],
[1782086400000, 7142],
[1782691200000, 7474],
[1783296000000, 7429],
[1783900800000, 7373],
[1784505600000, 7321],
[1785110400000, 7433],
[1785715200000, 7441],
[1786320000000, 7707],
[1786924800000, 7631],
[1787529600000, 7489]
]
},
{
name: "Casual",
data: [
[1736121600000, 623],
[1736726400000, 923],
[1737331200000, 889],
[1737936000000, 810],
[1738540800000, 696],
[1739145600000, 606],
[1739750400000, 969],
[1740355200000, 1007],
[1740960000000, 748],
[1741564800000, 764],
[1742169600000, 693],
[1742774400000, 1027],
[1743379200000, 730],
[1743984000000, 981],
[1744588800000, 1397],
[1745193600000, 1987],
[1745798400000, 2313],
[1746403200000, 3018],
[1747008000000, 3433],
[1747612800000, 3738],
[1748217600000, 4278],
[1748822400000, 4727],
[1749427200000, 4807],
[1750032000000, 5061],
[1750636800000, 5224],
[1751241600000, 5378],
[1751846400000, 5656],
[1752451200000, 5218],
[1753056000000, 5320],
[1753660800000, 5033],
[1754265600000, 4743],
[1754870400000, 4540],
[1755475200000, 4208],
[1756080000000, 3821],
[1756684800000, 3563],
[1757289600000, 2915],
[1757894400000, 2397],
[1758499200000, 2154],
[1759104000000, 1596],
[1759708800000, 865],
[1760313600000, 973],
[1760918400000, 805],
[1761523200000, 878],
[1762128000000, 964],
[1762732800000, 696],
[1763337600000, 925],
[1763942400000, 1005],
[1764547200000, 803],
[1765152000000, 989],
[1765756800000, 731],
[1766361600000, 749],
[1766966400000, 917],
[1767571200000, 722],
[1768176000000, 606],
[1768780800000, 857],
[1769385600000, 776],
[1769990400000, 663],
[1770595200000, 657],
[1771200000000, 614],
[1771804800000, 906],
[1772409600000, 697],
[1773014400000, 1063],
[1773619200000, 1051],
[1774224000000, 888],
[1774828800000, 876],
[1775433600000, 985],
[1776038400000, 1798],
[1776643200000, 2165],
[1777248000000, 2792],
[1777852800000, 3906],
[1778457600000, 4293],
[1779062400000, 4657],
[1779667200000, 5171],
[1780272000000, 6114],
[1780876800000, 6288],
[1781481600000, 6397],
[1782086400000, 6771],
[1782691200000, 7118],
[1783296000000, 6724],
[1783900800000, 6956],
[1784505600000, 6717],
[1785110400000, 6479],
[1785715200000, 6100],
[1786320000000, 6027],
[1786924800000, 5633],
[1787529600000, 4719]
]
}
],
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 storyboard-overview.json --out storyboard-overview.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/storyboard/overview/index.md …