Annotations

Declarative marks in data coordinates — drawn on top of the series and surviving zoom/resize. Interactive drawing is planned for future phases.

Modular build

When building with grafit-charts/core, annotations are a separate module: register(annotationsModule).

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Annotations' },
    series: [{ type: 'line', xField: 'month', yField: 'price', name: 'Price' }],
    annotations: [
      { type: 'horizontal-line', value: 180, stroke: '#e5484d', label: { text: 'resistance 180' } },
      { type: 'range', axis: 'x', range: ['Mar', 'Apr'], label: { text: 'correction' } },
      { type: 'line', start: { x: 'Jan', y: 140 }, end: { x: 'Aug', y: 196 }, stroke: '#21a06c', lineDash: [6, 4] },
      { type: 'text', x: 'Jun', y: 192, text: 'peak' },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', price: 142 },
    { month: 'Feb', price: 149 },
    { month: 'Mar', price: 161 },
    { month: 'Apr', price: 155 },
    { month: 'May', price: 171 },
    { month: 'Jun', price: 188 },
    { month: 'Jul', price: 179 },
    { month: 'Aug', price: 195 },
  ];
}

Horizontal and vertical lines can be dragged with the mouse (always enabled).

Types

Type	Fields	Description
horizontal-line	value, stroke?, lineDash?, label?	horizontal level
vertical-line	value (category/date), …	vertical mark
line	start: {x, y}, end: {x, y}	arbitrary segment (trend line)
text	x, y, text, color?, fontSize?	label at a data point
range	axis: 'x' | 'y', range: [a, b], fill?, label?	filled range

Full list of options

Option	Type	Default	Description
strokeWidth	lines	1	annotation line width
fillOpacity	range	0.12	range fill opacity
label.text	string	—	line label (horizontal/vertical-line)
label.fontSize	Pixels	11	label font size
label.color	ColorValue	line color	label color

Coordinates are specified as data values: categories/dates for X, numbers for Y.

horizontal-line and vertical-line can be dragged with the mouse — the value updates along the scale (categorical lines snap to the nearest category).