Line Chart

The Line Chart renders one or more data series as smooth or straight lines with optional markers. Choose from 13 polyline interpolation modes (linear, monotone, cardinal, catmull-rom, step, and more) per series, and get crosshair tracking, grid lines, a legend, and tooltips out of the box. Data updates animate smoothly — points enter, exit, and reposition with configurable transitions.

NOTE

For the full API, see the Charts API Reference.

Example

LinearMonotone XNaturalStepCardinalCatmull-RomBump X

Usage

import {
    createLineChart,
} from '@ripl/charts';

const chart = createLineChart('#container', {
    data: [...],
    key: 'month',
    series: [
        {
            id: 'revenue',
            value: 'revenue',
            label: 'Revenue',
            lineType: 'monotone',
        },
    ],
});

// Update data
chart.update({ data: newData });

Data Format

Each item should contain a key field and one or more numeric value fields:

const data = [
    { month: 'Jan',
        revenue: 620,
        expenses: 340 },
    { month: 'Feb',
        revenue: 780,
        expenses: 290 },
    { month: 'Mar',
        revenue: 550,
        expenses: 410 },
];

The key option identifies the x-axis category ('month'), and each series references a numeric field via value.

Variants

Multi-series with markers

createLineChart('#container', {
    data,
    key: 'month',
    series: [
        { id: 'revenue',
            value: 'revenue',
            label: 'Revenue',
            markers: true },
        { id: 'expenses',
            value: 'expenses',
            label: 'Expenses',
            markers: true },
    ],
});

Custom line interpolation

Each series can use a different polyline renderer:

createLineChart('#container', {
    data,
    key: 'month',
    series: [
        { id: 'revenue',
            value: 'revenue',
            label: 'Revenue',
            lineType: 'monotoneX' },
        { id: 'expenses',
            value: 'expenses',
            label: 'Expenses',
            lineType: 'step' },
    ],
});

Options

• data — The data array
• series — Array of series with id, value, label, optional color, lineType, lineWidth, markers, markerRadius
• key — Key accessor for each data point
• grid — boolean | ChartGridOptions — Show/configure grid lines (default true)
• crosshair — boolean | ChartCrosshairOptions — Show/configure crosshair (default true)
• legend — boolean | ChartLegendOptions — Show/configure legend
• tooltip — boolean | ChartTooltipOptions — Show/configure tooltips (default true)
• axis — boolean | ChartAxisOptions — Configure x/y axes
• padding — Chart padding