Polyline

A Polyline draws a series of connected line segments through a set of [x, y] points. The renderer property selects the curve algorithm the points are drawn with. Thirteen are built in — linear, spline, basis, bumpX, bumpY, cardinal, catmullRom, monotoneX, monotoneY, natural, step, stepBefore and stepAfter — and a custom render function can be passed in place of a name. Polylines back line charts, sparklines, area boundaries and any data path through connected points.

Example

The demo below shows the same set of points rendered with different renderer modes.

RendererlinearsplinebasisbumpXbumpYcardinalcatmullRommonotoneXnaturalstep

Usage

import {
    createPolyline,
} from '@ripl/web';

const polyline = createPolyline({
    stroke: '#3a86ff',
    lineWidth: 2,
    points: [[50, 150], [100, 50], [200, 180], [300, 80], [400, 120]],
});

Properties

The polyline is defined by points (an array of [x, y] tuples) and an optional renderer mode (default: 'linear').

NOTE

For the full property list, see the Polyline API Reference.

Renderer Modes

The renderer property controls how points are connected. Built-in options include 'linear', 'spline', 'basis', 'bumpX', 'bumpY', 'cardinal', 'catmullRom', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepBefore', and 'stepAfter'. Use the interactive demo above to preview each mode.

const smoothLine = createPolyline({
    stroke: '#3a86ff',
    lineWidth: 2,
    points: [[50, 150], [100, 50], [200, 180], [300, 80]],
    renderer: 'spline',
});

Custom Renderer

You can also pass a custom render function:

const custom = createPolyline({
    stroke: '#3a86ff',
    lineWidth: 2,
    points: myPoints,
    renderer: (context, path, points) => {
        // Custom drawing logic using the path API
        path.moveTo(points[0][0], points[0][1]);
        for (let i = 1; i < points.length; i++) {
            path.lineTo(points[i][0], points[i][1]);
        }
    },
});