Line with annotations

Share price with a target line, a highlighted range and point callouts.

Chart type
Line line
Tier
Free Core
Collection
Line
Render
Live, site theme
View .md Agent setup
LIVE/line/line-with-annotations4 of 14 in Line

Configuration

Raw Standalone
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()