Polyline

A Polyline draws a series of connected line segments through a set of points. It supports multiple rendering modes including smooth curves, splines, step functions, and more.

Example

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

linearsplinebasisbumpXbumpYcardinalcatmullRommonotoneXnaturalstep

Usage

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

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

Properties

Property	Type	Required	Description
points	[number, number][]	Yes	Array of [x, y] coordinate pairs
renderer	string | function	No	Rendering mode (default: 'linear')

Plus all Element style properties and Shape options.

Renderer Modes

The renderer property controls how points are connected. Ripl provides 13 built-in renderers:

Renderer	Description
'linear'	Straight line segments (default)
'spline'	Smooth spline curve with configurable tension
'basis'	Cubic B-spline interpolation
'bumpX'	Smooth bump curve along the X axis
'bumpY'	Smooth bump curve along the Y axis
'cardinal'	Cardinal spline with configurable tension
'catmullRom'	Catmull-Rom spline
'monotoneX'	Monotone cubic interpolation (preserves monotonicity in X)
'monotoneY'	Monotone cubic interpolation (preserves monotonicity in Y)
'natural'	Natural cubic spline
'step'	Step function (midpoint)
'stepBefore'	Step function (step before point)
'stepAfter'	Step function (step after point)

const smoothLine = createPolyline({
    strokeStyle: '#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({
    strokeStyle: '#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]);
        }
    },
});