Get it on npm

Line chart

A line draws on through its points over a soft area, each point popping as the line reaches it, the last value called out, against an optional target.

  • data/line-chart
  • Data
  • chart
  • Full frame
  • 6 s (3–30 s)
Live in your browser
Line chart at 16:9
0.00 / 6.00 s
Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop.

Render it

npx volito render data/line-chart --prop title="Weekly views since the switch" --prop suffix="K" --out line-chart.mov

That writes ProRes 4444. The same item in another shape, brand or format:

volito render data/line-chart --aspect 9:16 --style cobalt --out line-chart-9x16.mov
volito render data/line-chart --format mp4 --out line-chart.mp4
volito still data/line-chart --t 3 --out line-chart.png
volito info data/line-chart     # every prop and part
volito add data/line-chart      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("data/line-chart"), { props: { title: "Weekly views since the switch", suffix: "K" }, out: "line-chart.mov" });

Or ask an agent with the MCP server connected: “Render the Volito line chart (data/line-chart) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

PropTypeDefaultTakes
titletextWeekly views since the switch≤ 56 chars
rows
Rows (Label: value)
list{"label":"W1","value":12}; {"label":"W2","value":18}; {"label":"W3","value":16}; {"label":"W4","value":27}; {"label":"W5","value":34}; {"label":"W6","value":31}; {"label":"W7","value":46}; {"label":"W8","value":58}—
prefix
Before numbers
text—≤ 3 chars
suffix
After numbers
textK≤ 6 chars
decimalsnumber00 – 3
target
Target line (0 = none)
number400 – 1000000000000
targetLabel
Target label
textGoal≤ 16 chars

Parts

Each part takes any move, ease or idle: --motion ground.in=pop.

PartWhat it is
groundthe ground
titlethe heading
gridthe gridlines and axis labels
areathe area under the line
linethe line
dotsthe points
labelthe last value's callout
targetthe target line

Tags: chart, line, trend, growth, data

More in Data

Donut chart

Segments sweep round a ring one after another, the centre counts up to the total (or the first share), and a legend lists each part.

Bar chart race

Ranked bars grow and overtake each other as the periods advance; the axis rescales and the period counts up in the corner.

Goal meters

Rows of capsule meters fill to their share of a goal, each with its label and a percentage counting up.

Versus

Two sides face off: a label and a big number counting up on each, a VS badge popping between them and a split bar settling to their ratio.

Timeline

Milestones along a line that draws itself: each date's dot pops as the line reaches it and its words rise beside it.

Funnel

Stages stack from widest to narrowest, each dropping in with its count, and the share that carries on to the next stage between them.