Event Markers

An event marker is a flag anchored to a point in time, drawn along the x-axis with a hover card. It answers "what happened here", which is a different question from the price annotations and drawings that answer "look at this level".

chart.addEventMarker({ x: '2024-02-01', type: 'earnings', label: 'Q4 FY24 beat' })
chart.addEventMarker({ x: '2024-03-15', type: 'dividend', label: '$0.24 per share' })

Method	Does
`addEventMarker(config)`	Adds one, returns its id
`updateEventMarker(id, patch)`	Patches one
`removeEventMarker(id)`	Removes one
`clearEventMarkers()`	Removes all
`getEventMarker(id)` / `getEventMarkers()`	Reads them back

Config

Key	Type	What it is
`x`	timestamp, `Date`, or category	Where on the axis. Required
`type`	`'earnings' \| 'dividend' \| 'split' \| 'news' \| 'custom'`	Defaults to `'custom'`. Each type carries a default glyph and color
`label`	`string`	The hover card's title
`color`	`string`	Overrides the type's color
`glyph`	`string`	Overrides the badge text, one to three characters
`position`	`'bottom' \| 'top'`	Defaults to `'bottom'`
`meta`	`object`	Anything of yours, carried through events

The four named types exist so the common cases need no styling decision. custom plus a glyph and a color covers everything else.

How they are drawn

Markers live on a lightweight HTML overlay rather than in the chart's SVG. The overlay reprojects through zoom and pan, and markers scrolled outside the visible range are hidden rather than clamped to the edge, so a flag never claims a date it is not on.

Events

chart.on('eventMarkerHover', ({ id, marker, nativeEvent }) => {})
chart.on('eventMarkerClick', ({ id, marker, nativeEvent }) => {})

chart.on('eventMarkerAdded', ({ id, marker }) => {})
chart.on('eventMarkerUpdated', ({ id, marker }) => {})
chart.on('eventMarkerRemoved', ({ id }) => {})
chart.on('eventMarkersCleared', () => {})

eventMarkerClick with meta is the hook for opening a filing, a news item, or your own detail panel:

chart.addEventMarker({ x: '2024-02-01', type: 'news', label: 'Guidance raised', meta: { url: '/news/1284' } })
chart.on('eventMarkerClick', ({ marker }) => {
  if (marker.meta?.url) window.location.href = marker.meta.url
})

Persistence

Markers are captured by getState() and restored by setState(), meta included.

Not annotations, and not drawings

Three overlay systems, and picking the wrong one usually shows:

	Event markers	Annotations	Drawings
Anchored to	A time	A price, a time, or a band of either	Two points in price and time
Drawn	On the x-axis strip	In the plot	In the plot
Made by	Your code	Your code	The user, or your code
For	"This happened on this date"	"This level matters"	Technical analysis