Polyline

A Polyline draws a series of connected line segments through a set of [x, y] points. What makes Ripl's polyline powerful is its renderer property — choose from 13 built-in curve algorithms (spline, cardinal, catmull-rom, monotone, step, and more) or supply a custom render function. This makes it the go-to element for line charts, sparklines, data paths, and any visualization involving connected data points.

Example

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

linearsplinebasisbumpXbumpYcardinalcatmullRommonotoneXnaturalstep

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]);
        }
    },
});