Charts

Build area and line charts with monotone smoothing that never overshoots, fading gradient fills, dashed guides, bars and dots in SilkGraphics.

Updated November 8, 2026pixi-silk 1.0.1View as Markdown

pixi-silk has no chart component. It gives you the pieces a chart is drawn with: filled areas, smoothed series, dashed guides and bars. The experiments at the end of this page are complete chart widgets built from them.

Turn smoothing and dots on and off.

Fill the area under a series#

const FILL = vertical(
    [
        [0, 0x0a84ff, 0.55],
        [1, 0x0a84ff, 0],
    ],
    { easing: 'smooth' },
);

g.area(points, 190, { smooth: 'monotone' }).fill(FILL).stroke({ width: 2.5, color: 0x0a84ff, cap: 'round' });

area(points, lower) fills the region between a series and a y baseline. Pass a second series as lower to fill the band between two series. The stroke() right after it draws the series line on top, from the same smoothed points.

The area is split into vertical columns that share their edges exactly. A translucent fill stays even, with no seams between columns.

Option	Default	What it does
`smooth`	`false`	`'monotone'` draws a smooth curve through the points
`step`	`2`	Sample spacing of the smoothed curve, in local units

Smoothing that keeps the data#

smooth: 'monotone' never overshoots. It uses Steffen’s method, like d3’s curveMonotoneX. Peaks stay on the data points and flat runs stay flat. polyline() also takes smooth: 'catmull', which overshoots, so keep it for decorative curves. monotoneX() returns the resampled points if you need them for hit testing or labels.

Guides, bars and dots#

for (const y of [40, 90, 140]) g.line(20, y, 460, y).stroke({ width: 1, color: 0x3a3a3c, dash: [2, 4] });
for (const [i, v] of values.entries()) g.roundRect(20 + i * 12, 190 - v, 8, v, 3).fill(0xffd60a);
for (const [x, y] of points) g.circle(x, y, 3.5).fill(0xffffff).stroke({ width: 2, color: 0x0a84ff });

Guides are dashed lines, bars are rounded rects and dots are circles with a stroke. All of them go into the same SilkGraphics as the series.

One gradient across many bars#

By default a gradient fits each shape’s box. With units: 'local' it uses the coordinates of the graphics instead, so a row of bars samples one continuous ramp:

const HEAT = linear(
    [
        [0, 0x30d158],
        [0.5, 0xffd60a],
        [1, 0xff453a],
    ],
    { units: 'local', from: [0, 190], to: [0, 40] },
);

for (const [i, v] of values.entries()) g.roundRect(20 + i * 12, 190 - v, 8, v, 3).fill(HEAT);

A tall bar then reaches the red end and a short one stays green. Gradients covers the other gradient kinds and options.

Where it stops#

There are no axes, scales, tick generation or tooltips. Map your data to pixels yourself, or with a scale library such as d3-scale, and draw labels with text.

API reference: SilkGraphics, AreaOptions, monotoneX, vertical

Go deeper