Skip to content

Small charts

Sparkline table

Twelve rows of line, area, column and win-loss sparklines updating together on one render frame.

Sparkline table@ortex-charts/lite
Loading sparkline table…
Twelve rows of line, area, column and win-loss sparklines updating together on one render frame.

What this example is for

Twelve rows of sparklines in line, area, column and win-loss form, all updating on one animation frame rather than twelve. Reach for this in tables, watchlists and dashboards where the chart is a cell rather than a page. The whole build is 3.3 KB gzip, and it shares the theme and the maths with the full chart.

sparkline-table.ts
import { createSparkline, type Sparkline } from "@ortex-charts/lite";

// Three kinds of sparkline, sized in CSS pixels, no axes and no chrome.
sparks.push(createSparkline(cells[0], { kind: "area", width: 150, height: 30, colorByTrend: true }).setData(values));
sparks.push(createSparkline(cells[1], { kind: "column", width: 150, height: 30, baseline: 0 }).setData(returns));
sparks.push(createSparkline(cells[2], { kind: "winloss", width: 150, height: 22 }).setData(returns));

More small charts examples