Аннотации

Декларативные пометки в координатах данных — рисуются поверх серий и переживают зум/ресайз. Интерактивное рисование — в будущих фазах.

Модульная сборка

В сборке через grafit-charts/core аннотации — отдельный модуль: 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-line	value, stroke?, lineDash?, label?	горизонтальный уровень
vertical-line	value (категория/дата), …	вертикальная отметка
line	start: {x, y}, end: {x, y}	произвольный отрезок (трендовая)
text	x, y, text, color?, fontSize?	подпись в точке данных
range	axis: 'x' | 'y', range: [a, b], fill?, label?	закрашенный диапазон

Полный список опций

Опция	Тип	По умолчанию	Описание
strokeWidth	линии	1	толщина линии аннотации
fillOpacity	range	0.12	прозрачность заливки диапазона
label.text	string	—	подпись линии (horizontal/vertical-line)
label.fontSize	Pixels	11	шрифт подписи
label.color	ColorValue	цвет линии	цвет подписи

Координаты задаются значениями данных: категории/даты для X, числа для Y.

horizontal-line и vertical-line можно перетаскивать мышью — значение обновляется по шкале (категориальные линии прилипают к ближайшей категории).