Line with annotations
Share price with a target line, a highlighted range and point callouts.
Open the chart without page chrome ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "line",
toolbar: {
show: false
}
},
series: [
{
name: "Price",
data: [
[1767571200000, 83.38],
[1767657600000, 84.08],
[1767744000000, 83.23],
[1767830400000, 83.32],
[1767916800000, 82.66],
[1768003200000, 82.24],
[1768089600000, 82.91],
[1768176000000, 83.72],
[1768262400000, 83.35],
[1768348800000, 83.52],
[1768435200000, 82.88],
[1768521600000, 83.71],
[1768608000000, 84.37],
[1768694400000, 83.97],
[1768780800000, 84.23],
[1768867200000, 85.1],
[1768953600000, 85.45],
[1769040000000, 84.91],
[1769126400000, 85.49],
[1769212800000, 85.47],
[1769299200000, 84.86],
[1769385600000, 85.44],
[1769472000000, 84.96],
[1769558400000, 85.31],
[1769644800000, 85.82],
[1769731200000, 85.09],
[1769817600000, 84.69],
[1769904000000, 84.73],
[1769990400000, 85.64],
[1770076800000, 85.19],
[1770163200000, 84.64],
[1770249600000, 85.35],
[1770336000000, 85.06],
[1770422400000, 84.48],
[1770508800000, 83.65],
[1770595200000, 84.55],
[1770681600000, 85.07],
[1770768000000, 85.53],
[1770854400000, 86.01],
[1770940800000, 86.48],
[1771027200000, 87.21],
[1771113600000, 86.98],
[1771200000000, 87.88],
[1771286400000, 87.05],
[1771372800000, 86.23],
[1771459200000, 85.42],
[1771545600000, 86.13],
[1771632000000, 85.58],
[1771718400000, 85.95],
[1771804800000, 85.13],
[1771891200000, 85.76],
[1771977600000, 86.39],
[1772064000000, 86.91],
[1772150400000, 86.53],
[1772236800000, 85.81],
[1772323200000, 85.27],
[1772409600000, 85.17],
[1772496000000, 85.96],
[1772582400000, 85.35],
[1772668800000, 84.74],
[1772755200000, 84.49],
[1772841600000, 85.14],
[1772928000000, 85.36],
[1773014400000, 84.89],
[1773100800000, 85.26],
[1773187200000, 85.09],
[1773273600000, 85],
[1773360000000, 85.69],
[1773446400000, 85.02],
[1773532800000, 85.85],
[1773619200000, 86.5],
[1773705600000, 87.17],
[1773792000000, 87.12],
[1773878400000, 86.98],
[1773964800000, 87.58],
[1774051200000, 88.07],
[1774137600000, 88.04],
[1774224000000, 87.52],
[1774310400000, 87.68],
[1774396800000, 86.84],
[1774483200000, 86.06],
[1774569600000, 85.25],
[1774656000000, 84.91],
[1774742400000, 84.19],
[1774828800000, 83.36],
[1774915200000, 83.94],
[1775001600000, 84.41],
[1775088000000, 84.74],
[1775174400000, 85.49],
[1775260800000, 85.33],
[1775347200000, 85.44],
[1775433600000, 85.67],
[1775520000000, 85.14],
[1775606400000, 85.19],
[1775692800000, 85.33],
[1775779200000, 85.77],
[1775865600000, 85.61],
[1775952000000, 85.45],
[1776038400000, 85.16],
[1776124800000, 85.9],
[1776211200000, 86.74],
[1776297600000, 86.49],
[1776384000000, 85.69],
[1776470400000, 84.97],
[1776556800000, 84.81],
[1776643200000, 85.4],
[1776729600000, 85.01],
[1776816000000, 84.84],
[1776902400000, 83.97],
[1776988800000, 83.98],
[1777075200000, 84.24],
[1777161600000, 83.89],
[1777248000000, 84.26],
[1777334400000, 84.97],
[1777420800000, 85.83],
[1777507200000, 86.25],
[1777593600000, 87.09],
[1777680000000, 86.34],
[1777766400000, 86.89],
[1777852800000, 86.39]
]
}
],
xaxis: {
type: "datetime"
},
stroke: {
width: 2
},
annotations: {
yaxis: [
{
y: 90,
borderColor: "#f59e0b",
label: {
text: "Target 90",
style: {
background: "#f59e0b",
color: "#fff"
}
}
}
],
xaxis: [
{
x: 1771027200000,
x2: 1772582400000,
fillColor: "#2563eb",
opacity: 0.08,
label: {
text: "Earnings window"
}
}
],
points: [
{
x: 1775347200000,
y: 85.44,
marker: {
size: 5
},
label: {
text: "Product launch"
}
}
]
},
title: {
text: "Share price with annotations"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "line",
toolbar: {
show: false
}
},
series: [
{
name: "Price",
data: [
[1767571200000, 83.38],
[1767657600000, 84.08],
[1767744000000, 83.23],
[1767830400000, 83.32],
[1767916800000, 82.66],
[1768003200000, 82.24],
[1768089600000, 82.91],
[1768176000000, 83.72],
[1768262400000, 83.35],
[1768348800000, 83.52],
[1768435200000, 82.88],
[1768521600000, 83.71],
[1768608000000, 84.37],
[1768694400000, 83.97],
[1768780800000, 84.23],
[1768867200000, 85.1],
[1768953600000, 85.45],
[1769040000000, 84.91],
[1769126400000, 85.49],
[1769212800000, 85.47],
[1769299200000, 84.86],
[1769385600000, 85.44],
[1769472000000, 84.96],
[1769558400000, 85.31],
[1769644800000, 85.82],
[1769731200000, 85.09],
[1769817600000, 84.69],
[1769904000000, 84.73],
[1769990400000, 85.64],
[1770076800000, 85.19],
[1770163200000, 84.64],
[1770249600000, 85.35],
[1770336000000, 85.06],
[1770422400000, 84.48],
[1770508800000, 83.65],
[1770595200000, 84.55],
[1770681600000, 85.07],
[1770768000000, 85.53],
[1770854400000, 86.01],
[1770940800000, 86.48],
[1771027200000, 87.21],
[1771113600000, 86.98],
[1771200000000, 87.88],
[1771286400000, 87.05],
[1771372800000, 86.23],
[1771459200000, 85.42],
[1771545600000, 86.13],
[1771632000000, 85.58],
[1771718400000, 85.95],
[1771804800000, 85.13],
[1771891200000, 85.76],
[1771977600000, 86.39],
[1772064000000, 86.91],
[1772150400000, 86.53],
[1772236800000, 85.81],
[1772323200000, 85.27],
[1772409600000, 85.17],
[1772496000000, 85.96],
[1772582400000, 85.35],
[1772668800000, 84.74],
[1772755200000, 84.49],
[1772841600000, 85.14],
[1772928000000, 85.36],
[1773014400000, 84.89],
[1773100800000, 85.26],
[1773187200000, 85.09],
[1773273600000, 85],
[1773360000000, 85.69],
[1773446400000, 85.02],
[1773532800000, 85.85],
[1773619200000, 86.5],
[1773705600000, 87.17],
[1773792000000, 87.12],
[1773878400000, 86.98],
[1773964800000, 87.58],
[1774051200000, 88.07],
[1774137600000, 88.04],
[1774224000000, 87.52],
[1774310400000, 87.68],
[1774396800000, 86.84],
[1774483200000, 86.06],
[1774569600000, 85.25],
[1774656000000, 84.91],
[1774742400000, 84.19],
[1774828800000, 83.36],
[1774915200000, 83.94],
[1775001600000, 84.41],
[1775088000000, 84.74],
[1775174400000, 85.49],
[1775260800000, 85.33],
[1775347200000, 85.44],
[1775433600000, 85.67],
[1775520000000, 85.14],
[1775606400000, 85.19],
[1775692800000, 85.33],
[1775779200000, 85.77],
[1775865600000, 85.61],
[1775952000000, 85.45],
[1776038400000, 85.16],
[1776124800000, 85.9],
[1776211200000, 86.74],
[1776297600000, 86.49],
[1776384000000, 85.69],
[1776470400000, 84.97],
[1776556800000, 84.81],
[1776643200000, 85.4],
[1776729600000, 85.01],
[1776816000000, 84.84],
[1776902400000, 83.97],
[1776988800000, 83.98],
[1777075200000, 84.24],
[1777161600000, 83.89],
[1777248000000, 84.26],
[1777334400000, 84.97],
[1777420800000, 85.83],
[1777507200000, 86.25],
[1777593600000, 87.09],
[1777680000000, 86.34],
[1777766400000, 86.89],
[1777852800000, 86.39]
]
}
],
xaxis: {
type: "datetime"
},
stroke: {
width: 2
},
annotations: {
yaxis: [
{
y: 90,
borderColor: "#f59e0b",
label: {
text: "Target 90",
style: {
background: "#f59e0b",
color: "#fff"
}
}
}
],
xaxis: [
{
x: 1771027200000,
x2: 1772582400000,
fillColor: "#2563eb",
opacity: 0.08,
label: {
text: "Earnings window"
}
}
],
points: [
{
x: 1775347200000,
y: 85.44,
marker: {
size: 5
},
label: {
text: "Product launch"
}
}
]
},
title: {
text: "Share price with annotations"
},
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 line-line-with-annotations.json --out line-line-with-annotations.svg --with-table Public 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/line/line-with-annotations/index.md …