GrChartLine

Примеры 4 у каждого — живое демо и его код

• Месяц задержек и час, который его сломал

  720 точек на серию на шкале времени: рисунок прорежен до ширины, а курсор и скрытая таблица знают каждый час. v-model:x-window — видимое окно: его ставят пресеты, zoom="brush" даёт читателю протянуть своё, а ось переходит с дней на часы, когда окно становится коротким. SLO — линия references, а не серия.

  Checkout API · latencyLast 30 days · drag over the chart to zoom in

  30 days7 daysIncident 24 Sep

  • p95
  • p50

  Данные графика

  X	p95	p50
  7 сент. 2026 г., 00:00	153	58
  7 сент. 2026 г., 07:00	131	66
  7 сент. 2026 г., 13:00	232	80
  7 сент. 2026 г., 22:00	147	66
  8 сент. 2026 г., 06:00	146	66
  8 сент. 2026 г., 11:00	228	80
  8 сент. 2026 г., 17:00	229	81
  8 сент. 2026 г., 19:00	169	77
  9 сент. 2026 г., 06:00	138	64
  9 сент. 2026 г., 11:00	218	78
  9 сент. 2026 г., 14:00	254	82
  9 сент. 2026 г., 22:00	145	64
  10 сент. 2026 г., 07:00	152	59
  10 сент. 2026 г., 13:00	239	91
  10 сент. 2026 г., 15:00	244	84
  10 сент. 2026 г., 21:00	165	57
  11 сент. 2026 г., 07:00	139	68
  11 сент. 2026 г., 12:00	239	79
  11 сент. 2026 г., 17:00	234	81
  11 сент. 2026 г., 21:00	138	62
  12 сент. 2026 г., 07:00	128	66
  12 сент. 2026 г., 10:00	176	75
  12 сент. 2026 г., 14:00	206	70
  12 сент. 2026 г., 22:00	127	58
  13 сент. 2026 г., 06:00	128	59
  13 сент. 2026 г., 13:00	207	70
  13 сент. 2026 г., 15:00	165	76
  14 сент. 2026 г., 00:00	139	63
  14 сент. 2026 г., 06:00	135	61
  14 сент. 2026 г., 13:00	249	80
  14 сент. 2026 г., 19:00	199	66
  14 сент. 2026 г., 22:00	128	66
  15 сент. 2026 г., 07:00	134	61
  15 сент. 2026 г., 13:00	249	86
  15 сент. 2026 г., 16:00	244	80
  16 сент. 2026 г., 00:00	133	61
  16 сент. 2026 г., 07:00	137	64
  16 сент. 2026 г., 12:00	243	84
  16 сент. 2026 г., 21:00	138	68
  16 сент. 2026 г., 23:00	172	60
  17 сент. 2026 г., 05:00	133	65
  17 сент. 2026 г., 11:00	231	80
  17 сент. 2026 г., 21:00	148	56
  18 сент. 2026 г., 02:00	138	68
  18 сент. 2026 г., 08:00	151	67
  18 сент. 2026 г., 14:00	253	88
  18 сент. 2026 г., 21:00	150	58
  19 сент. 2026 г., 01:00	170	64
  19 сент. 2026 г., 05:00	136	68
  19 сент. 2026 г., 11:00	200	73
  19 сент. 2026 г., 19:00	154	73
  20 сент. 2026 г., 04:00	129	65
  20 сент. 2026 г., 05:00	164	62
  20 сент. 2026 г., 14:00	204	72
  20 сент. 2026 г., 22:00	137	67
  21 сент. 2026 г., 04:00	128	64
  21 сент. 2026 г., 10:00	218	77
  21 сент. 2026 г., 16:00	240	84
  21 сент. 2026 г., 22:00	128	60
  22 сент. 2026 г., 00:00	164	63
  22 сент. 2026 г., 06:00	150	67
  22 сент. 2026 г., 13:00	250	81
  22 сент. 2026 г., 21:00	148	66
  23 сент. 2026 г., 00:00	138	69
  23 сент. 2026 г., 07:00	135	68
  23 сент. 2026 г., 15:00	252	88
  23 сент. 2026 г., 21:00	142	63
  24 сент. 2026 г., 04:00	135	61
  24 сент. 2026 г., 07:00	629	177
  24 сент. 2026 г., 12:00	239	77
  24 сент. 2026 г., 21:00	128	59
  25 сент. 2026 г., 05:00	129	59
  25 сент. 2026 г., 12:00	238	79
  25 сент. 2026 г., 16:00	248	87
  25 сент. 2026 г., 23:00	133	67
  26 сент. 2026 г., 04:00	169	59
  26 сент. 2026 г., 07:00	135	68
  26 сент. 2026 г., 13:00	209	71
  26 сент. 2026 г., 21:00	139	64
  27 сент. 2026 г., 06:00	137	62
  27 сент. 2026 г., 12:00	202	67
  27 сент. 2026 г., 14:00	171	71
  27 сент. 2026 г., 22:00	135	62
  28 сент. 2026 г., 07:00	135	61
  28 сент. 2026 г., 13:00	240	91
  28 сент. 2026 г., 15:00	247	80
  28 сент. 2026 г., 20:00	148	66
  29 сент. 2026 г., 07:00	148	67
  29 сент. 2026 г., 11:00	231	77
  29 сент. 2026 г., 14:00	257	89
  29 сент. 2026 г., 22:00	139	67
  30 сент. 2026 г., 07:00	145	65
  30 сент. 2026 г., 11:00	230	76
  30 сент. 2026 г., 15:00	247	81
  30 сент. 2026 г., 22:00	141	68
  1 окт. 2026 г., 06:00	134	66
  1 окт. 2026 г., 13:00	235	81
  1 окт. 2026 г., 20:00	149	72
  1 окт. 2026 г., 21:00	172	64
  2 окт. 2026 г., 07:00	135	62
  2 окт. 2026 г., 11:00	230	81
  2 окт. 2026 г., 15:00	250	82
  2 окт. 2026 г., 21:00	128	65
  3 окт. 2026 г., 08:00	180	66
  3 окт. 2026 г., 10:00	156	72
  3 окт. 2026 г., 17:00	189	70
  3 окт. 2026 г., 21:00	141	56
  4 окт. 2026 г., 07:00	133	66
  4 окт. 2026 г., 10:00	192	69
  4 окт. 2026 г., 19:00	177	65
  4 окт. 2026 г., 22:00	129	60
  5 окт. 2026 г., 06:00	140	64
  5 окт. 2026 г., 14:00	246	81
  5 окт. 2026 г., 21:00	130	61
  6 окт. 2026 г., 02:00	171	64
  6 окт. 2026 г., 07:00	143	56
  6 окт. 2026 г., 15:00	253	88
  6 окт. 2026 г., 18:00	187	81
  6 окт. 2026 г., 22:00	168	57
  6 окт. 2026 г., 23:00	146	57
  SLO 300 ms: 300
  Показано 120 из 720 точек — те же, что нарисованы. Стрелками доступны все.

  Код и пропы

• Датчик, который замолчал

  null рвёт линию, а не роняет её в ноль: замолчавший датчик не намерил 0 °C. gaps="dashed" перекидывает через провал перемычку, чтобы тренд читался дальше, а пунктир говорит, что это не замер. Допустимый коридор — опорная полоса, а curve="smooth" не выносит кривую за показания.

  Fridge 3 · temperatureNo readings 03:00–05:00 — logger offline

  Данные графика

  X	Fridge 3
  6 окт. 2026 г., 00:00	4,6
  6 окт. 2026 г., 00:30	4,8
  6 окт. 2026 г., 01:00	5,1
  6 окт. 2026 г., 01:30	5,0
  6 окт. 2026 г., 02:00	4,9
  6 окт. 2026 г., 02:30	5,3
  6 окт. 2026 г., 03:00	нет значения
  6 окт. 2026 г., 03:30	нет значения
  6 окт. 2026 г., 04:00	нет значения
  6 окт. 2026 г., 04:30	нет значения
  6 окт. 2026 г., 05:00	7,6
  6 окт. 2026 г., 05:30	6,9
  6 окт. 2026 г., 06:00	6,1
  6 окт. 2026 г., 06:30	5,4
  6 окт. 2026 г., 07:00	5,0
  6 окт. 2026 г., 07:30	4,8
  6 окт. 2026 г., 08:00	4,7
  6 окт. 2026 г., 08:30	4,9
  6 окт. 2026 г., 09:00	5,2
  6 окт. 2026 г., 09:30	5,1
  6 окт. 2026 г., 10:00	4,8
  6 окт. 2026 г., 10:30	4,6
  6 окт. 2026 г., 11:00	4,5
  6 окт. 2026 г., 11:30	4,7
  6 окт. 2026 г., 12:00	4,8
  2–8 °C: от 2,0 до 8,0

  Код и пропы

• Места, которые меняются в день, а не плавно

  curve="step" рисует величину, которая скачет и держится, — наклонная линия выдумала бы 18,5 места в марте. show-points="always" отмечает выставленные месяцы, а point-click открывает строку счёта за месяц.

  Northwind Traders · seats billedTeam plan, €12 a seat · click a month

  Данные графика

  X	Seats
  1 нояб. 2025 г., 00:00	12
  1 дек. 2025 г., 00:00	12
  1 янв. 2026 г., 00:00	15
  1 февр. 2026 г., 00:00	15
  1 мар. 2026 г., 00:00	15
  1 апр. 2026 г., 00:00	22
  1 мая 2026 г., 00:00	22
  1 июн. 2026 г., 00:00	22
  1 июл. 2026 г., 00:00	20
  1 авг. 2026 г., 00:00	28
  1 сент. 2026 г., 00:00	28
  1 окт. 2026 г., 00:00	34

  Click a month to see its invoice line.

  Код и пропы

• Две единицы — две шкалы

  dual-axis даёт конверсии свою шкалу справа — на левой она легла бы плашмя под 1 700 регистраций. У каждой оси свой формат делений, опора по x отмечает смену цен, а v-model:hidden-series держит состояние легенды у страницы: график только сообщает намерение.

  Growth after the price changeMore people sign up since W32, fewer of them pay

  • Sign-ups
  • Paid within 14 days

  Данные графика

  X	Sign-ups (левая ось)	Paid within 14 days (правая ось)
  W28	820	6,1
  W29	860	6,0
  W30	910	6,3
  W31	870	6,4
  W32	1 040	5,8
  W33	1 180	5,2
  W34	1 210	5,0
  W35	1 160	5,1
  W36	1 390	4,6
  W37	1 520	4,3
  W38	1 480	4,4
  W39	1 610	4,1
  W40	1 700	3,9
  New prices: W32

  Код и пропы

API порождается из пакета · разойтись не может

import type { GrChartLineConfigurableProps, GrChartSize, GrChartLineProps } from '@feugene/granularity-charts/components/GrChartLine'

const grChartLineConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrChartLine">;

interface GrChartLineConfigurableProps {
    /**
     * Когда прореживать ряд для рисунка. Политика рендера — приложение с плотными
     * рядами задаёт её один раз на всё поддерево.
     */
    decimate: 'auto' | 'always' | 'never';
    /** Бюджет точек на серию. */
    maxPoints: number;
    /**
     * Какими жестами меняется видимое окно.
     *
     * Политика приложения, а не свойство отдельного графика: включать
     * приближение на одной панели и не включать на соседней — это разные правила
     * поведения у одинаковых с виду картинок.
     */
    zoom: GrChartZoom;
    /**
     * Потолок строк скрытой таблицы данных.
     *
     * Политика приложения: держать ли полный ряд в дереве доступности, усечь ли
     * его до нарисованного или убрать таблицу вовсе — решение уровня продукта, а
     * не отдельного графика.
     */
    dataTableMaxRows: number | 'auto';
    size: GrChartSize;
    height: number;
    curve: GrChartCurve;
    /** Чем закрыть разрыв ряда: ничем, тенью или штрихом. */
    gaps: 'hidden' | 'shadow' | 'dashed';
    showGrid: 'both' | 'x' | 'y' | 'none';
    showLegend: boolean | 'auto';
    legendPosition: 'top' | 'bottom';
    tooltip: boolean;
    dataTable: 'hidden' | 'visible' | 'off';
}

type GrChartSize = GrComponentSize;

const grChartLineSafelist: string[];

interface GrChartLineProps {
    /** Серии либо голый ряд чисел — тогда `x` становится порядковым номером. */
    series: readonly GrChartSeries[] | readonly number[];
    /** Тип оси X. Не задан — выводится из данных. */
    xScale?: GrChartScaleKind;
    /**
     * Высота холста в пикселях; по умолчанию 256. Данные, загрузка и пустое состояние занимают её
     * одинаково.
     */
    height?: number;
    /** Объявленная ширина: от неё идёт первый рендер, дальше ширина замеряется. */
    width?: number;
    /** Границы оси значений `[min, max]`; `null` на месте границы — она берётся по данным. */
    yDomain?: readonly [number | null, number | null];
    /** Дотянуть ось значений до нуля; по умолчанию нет — ось облегает данные. */
    includeZero?: boolean;
    /**
     * Опорные линии и полосы: порог, план, коридор допустимого.
     *
     * Не серия и нигде ею не считается: в легенду не попадает, индекс палитры не
     * тратит, в стек не входит и в скрытую таблицу уезжает примечанием, а не
     * строкой данных.
     */
    references?: readonly GrChartReference[];
    /**
     * Включить опоры в домен оси.
     *
     * По умолчанию нет, и это осознанно: порог `1.0` при данных около `0.03`
     * растянул бы ось так, что сами данные схлопнулись бы в линию.
     */
    includeReferencesInDomain?: boolean;
    /**
     * Показывать вторую ось значений справа.
     *
     * Без неё серии с `axis: 'right'` попадают на левую. Включение осознанное:
     * две оси позволяют подогнать любые два ряда под видимую корреляцию, и это
     * должно быть решением автора графика, а не побочным эффектом поля в данных.
     */
    dualAxis?: boolean;
    /**
     * Границы правой оси значений при `dualAxis`; `null` на месте границы — она берётся по данным.
     */
    yDomainRight?: readonly [number | null, number | null];
    /** Подпись деления правой оси. Не задана — число по локали. */
    yTickFormatRight?: (value: number) => string;

interface GrChartLineEmits {
    /**
     * Легенда просит скрыть или показать серию — новый список id; применяет его потребитель
     * (`v-model:hiddenSeries`).
     */
    (e: 'update:hiddenSeries', value: string[]): void;
    /** Курсор сдвинулся: индекс позиции или `null` — для `v-model:activeIndex`. */
    (e: 'update:activeIndex', value: number | null): void;
    /** Жест приближения сменил видимое окно — для `v-model:xWindow`. */
    (e: 'update:xWindow', value: GrChartXWindow | null): void;
    /** Щелчок или Enter по активной позиции — со значениями всех видимых серий в ней. */
    (e: 'pointClick', value: GrChartActivePoint): void;
    /** Курсор пришёл на позицию или ушёл с графика (`null`). */
    (e: 'pointHover', value: GrChartActivePoint | null): void;
    /** Нажат пункт легенды: какая серия и в какое состояние просится. */
    (e: 'legendToggle', value: {
        seriesId: string;
        hidden: boolean;
    }): void;
}

Доступность

Полный контракт пакета: docs/keyboard.md ↗

Связанные четвёртый вопрос: когда не это

• GrChartAreaГрафики

  Показать целое и вклад частей в него

• GrChartBarГрафики

  Сравнить величины по категориям

• GrChartPieГрафики

  Показать, из чего состоит одно целое

• GrChartRadarГрафики

  Сравнить форму профиля по нескольким осям

• GrSparklineГрафики

  Тренд в ячейке таблицы, без осей и рамы

• GrStatisticДанные

  Одно число крупно, с динамикой

• GrChartBulletГрафикиссылается сюда

  Берут, когда метрика с порогами, которые уже есть в данных.

• GrChartHeatmapГрафикиссылается сюда

  Берут, когда матрица удержания по когортам.