Line

Line series: xField is the category, yField is the numeric value.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Average temperature' },
    subtitle: { text: '°C by month' },
    series: [{ type: 'line', xField: 'month', yField: 'temperature', name: 'Temperature' }],
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', temperature: -8 },
    { month: 'Feb', temperature: -6 },
    { month: 'Mar', temperature: 1 },
    { month: 'Apr', temperature: 9 },
    { month: 'May', temperature: 16 },
    { month: 'Jun', temperature: 21 },
    { month: 'Jul', temperature: 24 },
    { month: 'Aug', temperature: 22 },
    { month: 'Sep', temperature: 15 },
    { month: 'Oct', temperature: 8 },
    { month: 'Nov', temperature: 1 },
    { month: 'Dec', temperature: -5 },
  ];
}

Multiple lines

Each series is a separate item in the series array; colors are assigned from the theme palette in order.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Sessions by platform' },
    series: [
      { type: 'line', xField: 'quarter', yField: 'mobile', name: 'Mobile' },
      { type: 'line', xField: 'quarter', yField: 'desktop', name: 'Desktop' },
      {
        type: 'line',
        xField: 'quarter',
        yField: 'tablet',
        name: 'Tablet',
        lineDash: [4, 3],
        marker: { shape: 'diamond' },
      },
    ],
  };
}

data.ts

export function getData() {
  return [
    { quarter: 'Q1 24', desktop: 320, mobile: 410, tablet: 95 },
    { quarter: 'Q2 24', desktop: 305, mobile: 468, tablet: 88 },
    { quarter: 'Q3 24', desktop: 298, mobile: 540, tablet: 90 },
    { quarter: 'Q4 24', desktop: 312, mobile: 615, tablet: 84 },
    { quarter: 'Q1 25', desktop: 290, mobile: 689, tablet: 79 },
    { quarter: 'Q2 25', desktop: 285, mobile: 744, tablet: 73 },
  ];
}

Value labels

label renders the value next to each point; placement — top/bottom/left/right, formatter({ value, datum }) and the font are configurable (a halo in the background color keeps labels readable on top of grid lines):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Value labels at points' },
    subtitle: { text: "placement: 'top' | 'bottom' | 'left' | 'right'" },
    series: [
      {
        type: 'line',
        xField: 'month',
        yField: 'sales',
        name: 'Sales',
        label: {
          enabled: true,
          placement: 'top',
          fontWeight: 'bold',
          formatter: ({ value }) => `${value}K`,
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', sales: 42 },
    { month: 'Feb', sales: 55 },
    { month: 'Mar', sales: 49 },
    { month: 'Apr', sales: 68 },
    { month: 'May', sales: 62 },
    { month: 'Jun', sales: 81 },
  ];
}

Line styles

lineDash, line width, marker shapes, and a shared tooltip:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Line and marker styles' },
    series: [
      { type: 'line', xField: 'month', yField: 'fact', name: 'Actual', strokeWidth: 2.5, marker: { shape: 'circle' } },
      { type: 'line', xField: 'month', yField: 'plan', name: 'Plan', lineDash: [6, 4], marker: { enabled: false } },
      {
        type: 'line',
        xField: 'month',
        yField: 'lastYear',
        name: 'Last year',
        stroke: '#9aa1ad',
        lineDash: [2, 3],
        marker: { shape: 'diamond', size: 6 },
      },
    ],
    tooltip: { mode: 'shared', range: 'nearest' },
    crosshair: { enabled: true },
  };
}

data.ts

export function getData() {
  const data = [];
  for (let i = 0; i < 12; i++) {
    data.push({
      month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][i],
      fact: Math.round(80 + 30 * Math.sin(i / 1.8) + i * 2),
      plan: Math.round(85 + i * 2.4),
      lastYear: Math.round(70 + 26 * Math.sin(i / 1.8 + 0.6) + i * 1.6),
    });
  }
  return data;
}

Options

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

Option	Type	Default	Description
xField	string	—	data keys (required)
yField	string	—	data keys (required)
xName	string	yField	names for legend and tooltip
name	string	yField	names for legend and tooltip
stroke	ColorValue	theme palette	line color
strokeWidth	Pixels	2	line width
lineDash	Pixels[]	—	dash pattern
visible	boolean	true	series visibility
showInLegend	boolean	true	legend item
tooltip.renderer	function	—	custom tooltip content
label.enabled	boolean	false	show value labels
label.placement	'top' | 'bottom' | 'left' | 'right'	'top'	label placement
label.formatter	({ value, datum }) => string	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; inside — auto contrast	text color
marker.enabled	boolean	true	show markers
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

Points with non-numeric yField values break the line (connectMissingData is planned for future phases).