Area

Область под линией; заливается от нуля (или от предыдущей серии в стеке).

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Website Visitors' },
    subtitle: { text: 'thousands per month' },
    series: [{ type: 'area', xField: 'month', yField: 'visitors', name: 'Visitors' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', visitors: 310 },
    { month: 'Feb', visitors: 345 },
    { month: 'Mar', visitors: 410 },
    { month: 'Apr', visitors: 388 },
    { month: 'May', visitors: 462 },
    { month: 'Jun', visitors: 520 },
    { month: 'Jul', visitors: 498 },
    { month: 'Aug', visitors: 545 },
  ];
}

Подписи значений

label — как у line: placement top/bottom/left/right, formatter, шрифт:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Area with Value Labels' },
    series: [
      {
        type: 'area',
        xField: 'week',
        yField: 'signups',
        name: 'Signups',
        fillOpacity: 0.25,
        marker: { enabled: true },
        label: { enabled: true, placement: 'top', fontWeight: 'bold' },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { week: 'W1', signups: 120 },
    { week: 'W2', signups: 168 },
    { week: 'W3', signups: 145 },
    { week: 'W4', signups: 210 },
    { week: 'W5', signups: 198 },
    { week: 'W6', signups: 256 },
  ];
}

Стекинг

stacked: true складывает области; порядок серий в массиве — порядок снизу вверх.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Requests by Channel' },
    series: [
      { type: 'area', xField: 'month', yField: 'web', name: 'Web', stacked: true },
      { type: 'area', xField: 'month', yField: 'app', name: 'App', stacked: true },
      { type: 'area', xField: 'month', yField: 'api', name: 'API', stacked: true },
    ],
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', app: 120, web: 180, api: 60 },
    { month: 'Feb', app: 132, web: 174, api: 72 },
    { month: 'Mar', app: 151, web: 192, api: 81 },
    { month: 'Apr', app: 168, web: 188, api: 95 },
    { month: 'May', app: 190, web: 201, api: 108 },
    { month: 'Jun', app: 214, web: 196, api: 121 },
  ];
}

Перекрывающиеся области

Без стекинга, с настройкой fillOpacity:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Overlapping Areas' },
    subtitle: { text: 'fillOpacity + shared tooltip' },
    series: [
      { type: 'area', xField: 'hour', yField: 'desktop', name: 'Desktop', fillOpacity: 0.35 },
      { type: 'area', xField: 'hour', yField: 'mobile', name: 'Mobile', fillOpacity: 0.35 },
    ],
    tooltip: { mode: 'shared', range: 'nearest' },
  };
}

data.ts

export function getData() {
  const data = [];
  for (let hour = 0; hour < 24; hour++) {
    data.push({
      hour: `${String(hour).padStart(2, '0')}:00`,
      mobile: Math.round(40 + 35 * Math.exp(-((hour - 20) ** 2) / 18) + 25 * Math.exp(-((hour - 8) ** 2) / 10)),
      desktop: Math.round(20 + 55 * Math.exp(-((hour - 14) ** 2) / 22)),
    });
  }
  return data;
}

Опции

Общие опции всех серий (name, showInLegend, tooltip.renderer, …) — в разделе Общие опции серий.

Опция	Тип	По умолчанию	Описание
xField	string	—	ключи данных
yField	string	—	ключи данных
fill	ColorValue	палитра	заливка области
fillOpacity	Fraction	0.35	заливка области
stroke	ColorValue	цвет заливки	верхняя линия
strokeWidth	Pixels	2	верхняя линия
lineDash	Pixels[]	—	пунктир линии
normalizedTo	number	—	нормализация итога стека (100 — процентный стек)
stacked	boolean	false	стекинг
stackGroup	string	false	стекинг
label.enabled	boolean	false	показать подписи значений
label.placement	'top' | 'bottom' | 'left' | 'right'	'top'	позиция подписи
label.formatter	({ value, datum }) => string	значение	содержимое подписи
label.fontSize	Pixels	11	размер шрифта подписи
label.fontWeight	string | number	normal	насыщенность
label.fontFamily	string	шрифт темы	гарнитура
label.color	ColorValue	foreground; внутри — автоконтраст	цвет текста
marker.enabled	boolean	false	показать маркеры
marker.shape	MarkerShape	circle	форма маркера
marker.size	Pixels	7	размер маркера
marker.fill	ColorValue	цвет серии	заливка маркера
marker.stroke	ColorValue	фон чарта	обводка маркера
marker.strokeWidth	Pixels	1.5	толщина обводки