Line

A line chart connects observations with a path. It shows trends and change over an ordered or continuous x-axis. In the Graphy SDK it is a geom.line() layer over x and y position scales.

Basic example

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

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 spec={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

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

Multiple groups

Map a categorical column to color to split the data into one line per group, 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.discrete()
);

scale.color.discrete() draws group colors from Graphy’s default palette. To pin specific colors, use scale.color.discrete({ domain: ['North', 'South'], range: ['#4C6EF5', '#F76707'] }). strokeWidth, lineType and alpha can be mapped too, each with its own scale: scale.strokeWidth.continuous(), scale.alpha.continuous(), and scale.lineType.discrete() for a dash pattern per group. lineType is discrete only. Mapping it to a numeric variable is an error, since there is nothing between two dash patterns to interpolate. To single one layer out instead, give it an id and scope a style entry to it with { layer }:

import { createSpec, pipe, geom, scale, styles, style } from '@graphysdk/react';

const spec = pipe(
  createSpec({ x: 'month', y: 'sales' }),
  geom.line({ id: 'trend' }),
  scale.x(),
  scale.y(),
  styles({
    defaults: [style.geom.line({ strokeWidth: 4 }, { layer: 'trend' })],
  })
);

Smoothing

The curve param sets how the path bends. 'linear', the default, draws straight segments; 'smooth' draws a curve through every point:

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

Area fill

A line draws no fill of its own. Declare a fillAlpha style default to add a gradient beneath it, fading from the line’s color to transparent at the baseline:

import { createSpec, pipe, geom, scale, styles, style } from '@graphysdk/react';

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.line(),
  scale.x(),
  scale.y(),
  styles({ defaults: [style.geom.line({ fillAlpha: 0.15 })] })
);

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 observations. 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 }),
  scale.x(),
  scale.y()
);

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

Line params reference

'linear' | 'smooth'

default:"linear"

Curve family. 'smooth' smooths the line through every point.

'gap' | 'connect' | 'zero'

default:"gap"

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

Paint (stroke width, dash, opacity and the fill wash) comes from the stylesheet: style.geom.line({ stroke, fill, alpha, saturation, strokeWidth, dashArray, fillAlpha }). A line draws at strokeWidth: 2 and dashArray: [], with no fill until you declare a fillAlpha.

Styling — stroke width, dash, the fill wash and per-layer scoping
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

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Basic example

Multiple groups

Smoothing

Area fill

Missing values

Points on the line

Line params reference

​Basic example

​Multiple groups

​Smoothing

​Area fill

​Missing values

​Points on the line

​Line params reference

​Related

Basic example

Multiple groups

Smoothing

Area fill

Missing values

Points on the line

Line params reference

Related