Download Core

Annotation authoring

Click the chart to pin notes; remove the last one.

Why it matters no ink/authoring tool in core; app-level: click adds a labelled point annotation, list is editable and undoable

Chart type
Area area
Tier
Free Core
Collection
Interactivity
Render
Live, site theme
View .md Agent setup
LIVE/interactivity/annotation-authoring4 of 4 in Interactivity

Open the chart without page chrome ↗

Configuration

Raw Standalone 
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "area",
    events: {
      click: (e, ch, o) => { const i = o.dataPointIndex; if (i == null || i < 0) return; notes.push({ x: d[i][0], y: d[i][1], t: 'Note ' + ++n }); draw(ch) }
    },
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Signups",
      data: [
        [1767571200000, 51],
        [1767657600000, 48],
        [1767744000000, 46],
        [1767830400000, 46],
        [1767916800000, 47],
        [1768003200000, 46],
        [1768089600000, 49],
        [1768176000000, 49],
        [1768262400000, 47],
        [1768348800000, 50],
        [1768435200000, 49],
        [1768521600000, 49],
        [1768608000000, 51],
        [1768694400000, 49],
        [1768780800000, 50],
        [1768867200000, 50],
        [1768953600000, 48],
        [1769040000000, 46],
        [1769126400000, 44],
        [1769212800000, 45],
        [1769299200000, 46],
        [1769385600000, 46],
        [1769472000000, 45],
        [1769558400000, 44],
        [1769644800000, 45],
        [1769731200000, 43],
        [1769817600000, 43],
        [1769904000000, 41],
        [1769990400000, 42],
        [1770076800000, 44],
        [1770163200000, 47],
        [1770249600000, 45],
        [1770336000000, 44],
        [1770422400000, 46],
        [1770508800000, 47],
        [1770595200000, 46],
        [1770681600000, 44],
        [1770768000000, 45],
        [1770854400000, 47],
        [1770940800000, 49],
        [1771027200000, 47],
        [1771113600000, 46],
        [1771200000000, 46],
        [1771286400000, 45],
        [1771372800000, 44],
        [1771459200000, 43],
        [1771545600000, 42],
        [1771632000000, 40],
        [1771718400000, 39],
        [1771804800000, 41],
        [1771891200000, 42],
        [1771977600000, 44],
        [1772064000000, 45],
        [1772150400000, 44],
        [1772236800000, 44],
        [1772323200000, 44],
        [1772409600000, 43],
        [1772496000000, 45],
        [1772582400000, 43],
        [1772668800000, 44]
      ]
    }
  ],
  xaxis: {
    type: "datetime"
  },
  tooltip: {
    shared: true,
    intersect: false
  },
  title: {
    text: "Click to add a note"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()