Line

Line charts connect observations with a path. They’re ideal for showing trends and change over an ordered or continuous x-axis. In the Graphy SDK, a line chart is a geom.line() layer over x/y position scales.

Basic example

import { useMemo } from 'react';
import { createSpec, pipe, geom, scale } from '@graphysdk/viz-engine';
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';

const data = {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'revenue', label: 'Revenue' },
  ],
  rows: [
    { month: 'Jan', revenue: 1200 },
    { month: 'Feb', revenue: 1800 },
    { month: 'Mar', revenue: 2400 },
    { month: 'Apr', revenue: 1600 },
    { month: 'May', revenue: 3200 },
    { month: 'Jun', revenue: 2800 },
  ],
};

export function RevenueChart() {
  const spec = useMemo(() => pipe(
    createSpec({ x: 'month', y: 'revenue' }),
    geom.line(),
    scale.x(),
    scale.y(),
  ), []);

  return (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

scale.x() infers a datetime scale here — Graphy recognizes the abbreviated month names (Jan, Feb, …) as dates — while scale.y() infers a continuous scale from the numeric revenue. To treat the months as plain, evenly-spaced categories instead, use scale.x.discrete().

Multiple series

Map a categorical column to color to split the data into one line per category, and add a color scale:

const data = {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'region', label: 'Region' },
    { key: 'sales', label: 'Sales' },
  ],
  rows: [
    { month: 'Jan', region: 'North', sales: 600 },
    { month: 'Jan', region: 'South', sales: 900 },
    { month: 'Jan', region: 'East', sales: 1400 },
    { month: 'Jan', region: 'West', sales: 1800 },
    { month: 'Jan', region: 'Central', sales: 2400 },
    // ...
  ],
};

const spec = pipe(
  createSpec({ x: 'month', y: 'sales', color: 'region' }),
  geom.line(),
  scale.x(),
  scale.y(),
  scale.color.palette()
);

scale.color.palette() draws series colors from Graphy’s default palette. To pin specific colors, use scale.color.discrete({ domain: ['North', 'South'], range: ['#4C6EF5', '#F76707'] }).

Smoothing

The interpolate param sets the curve family. The default 'linear' draws straight segments; 'catmull-rom' draws a smooth curve through every point:

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.line({ params: { interpolate: 'catmull-rom' } }),
  scale.x(),
  scale.y()
);

Area fill

Set showFill: true to draw a gradient beneath the line, fading from the series color to transparent at the baseline:

geom.line({ params: { showFill: true } });

For a solid filled band rather than a fading gradient, use geom.area() instead.

Missing values

Use null for a missing cell. missingValues controls how the path treats the gap:

const data = {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'revenue', label: 'Revenue' },
  ],
  rows: [
    { month: 'Jan', revenue: 1200 },
    { month: 'Feb', revenue: 1800 },
    { month: 'Mar', revenue: null },
    { month: 'Apr', revenue: null },
    { month: 'May', revenue: 3200 },
    { month: 'Jun', revenue: 2800 },
  ],
};

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.line({ params: { missingValues: 'connect' } }),
  scale.x(),
  scale.y()
);

Points on the line

Add a geom.point() layer to mark every vertex. It shares the spec-level mapping, so both layers plot the same series. Pipe it after the line so the dots sit on top, and set interactive: false on the point layer:

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.line(),
  geom.point({ interactive: false, params: { size: 6 } }),
  scale.x(),
  scale.y()
);

interactive: false keeps the points out of hit-detection so the line owns hover — it resolves the nearest point along the x-axis and drives the tooltip. Interactive points would make hover fire only when the cursor lands directly on a dot.

Line params reference

params.interpolate

'linear' | 'catmull-rom'

default:"linear"

Curve family. 'catmull-rom' smooths the line through every point.

params.lineWidth

number | 'auto'

Stroke width in pixels. 'auto' reads the per-observation strokeWidth aesthetic, falling back to the geom default when unmapped.

params.showFill

boolean

default:"false"

Draw a gradient fill beneath the line, from the series color down to transparent at the baseline.

params.missingValues

'gap' | 'connect' | 'zero'

default:"gap"

How the path handles null values: break at the gap ('gap'), span it ('connect'), or treat as zero ('zero').

Chart types overview — the full recipe list
Axes — labels, ticks, grid and baseline
Statistics — add a smooth trendline
Data structure — how columns feed the mapping

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Basic example

Multiple series

Smoothing

Area fill

Missing values

Points on the line

Line params reference

​Basic example

​Multiple series

​Smoothing

​Area fill

​Missing values

​Points on the line

​Line params reference

​Related

Basic example

Multiple series

Smoothing

Area fill

Missing values

Points on the line

Line params reference

Related