Area

The area under a line; filled from zero (or from the previous series in a stack).

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 },
  ];
}

Value labels

label — same as for line: placement top/bottom/left/right, formatter, font:

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 },
  ];
}

Stacking

stacked: true stacks areas on top of each other; the order of series in the array is the bottom-to-top order.

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 },
  ];
}

Overlapping areas

Without stacking, with fillOpacity configured:

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;
}

Marker on hover

marker.showOn: 'hover' keeps the area bare and draws a marker only on the highlighted point — by the pointer, the keyboard or a shared tooltip. Handy for small charts where a marker on every point is noise. Works the same on a line:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Visits this week' },
    series: [{ type: 'area', xField: 'day', yField: 'visits', name: 'Visits', fillOpacity: 0.2, marker: { showOn: 'hover', size: 8 } }],
  };
}

data.ts

export function getData() {
  return [
    { day: 'Mon', visits: 1240 },
    { day: 'Tue', visits: 1380 },
    { day: 'Wed', visits: 1310 },
    { day: 'Thu', visits: 1520 },
    { day: 'Fri', visits: 1690 },
    { day: 'Sat', visits: 1120 },
    { day: 'Sun', visits: 980 },
  ];
}

Options

Options common to all series (name, showInLegend, tooltip.renderer, …) are covered in Common series options.

Option	Type	Default	Description
xField	string	—	data keys
yField	string	—	data keys
fill	ColorValue	palette	area fill
fillOpacity	Fraction	0.35	area fill
stroke	ColorValue	fill color	top line
strokeWidth	Pixels	2	top line
lineDash	Pixels[]	—	line dash pattern
normalizedTo	number	—	normalize the stack total (100 — percentage stack)
stacked	boolean	false	stacking
stackGroup	string	false	stacking
label.enabled	boolean	false	show value labels
label.placement	'top' | 'bottom' | 'left' | 'right'	'top'	label position
label.formatter	({ value, datum }) => string	the value	label content
label.fontSize	Pixels	11	label font size
label.fontWeight	string | number	normal	font weight
label.fontFamily	string	theme font	font family
label.color	ColorValue	foreground; auto-contrast when inside	text color
marker.enabled	boolean	false	show markers
marker.showOn	'always' | 'hover'	'always'	'hover' — only the highlighted point; turns on markers by itself
marker.shape	MarkerShape	circle	marker shape
marker.size	Pixels	7	marker size
marker.fill	ColorValue	series color	marker fill
marker.stroke	ColorValue	chart background	marker stroke
marker.strokeWidth	Pixels	1.5	stroke width
marker.itemStyler	(params) => style	—	style of one marker by its datum (fill, stroke, strokeWidth, size, label.color); the area keeps the series color