Showcase: an animated bar and line chart in 7 seconds

A chart that builds itself is one of the most useful shots in a business video. This one shows six weekly bars rising one after another, then a red line drawing across them for a second measure. It sits on a warm off white page with a serif title, the way a good report looks.

One honest note up front: the numbers in this clip are illustrative sample data, and the clip says so in its own subtitle. It is here to show the motion, not to make a claim.

How we made it

The chart is plain HTML. Each bar is an element whose height grows from zero to its value, staggered so they land left to right. The value label counts up as the bar grows. Once the bars are in, the line is an SVG path that draws itself along its length. The whole build takes about four seconds and then holds so the viewer can read it.

Since the chart is built from data and not drawn by hand, changing the numbers and re-rendering gives a correct chart every time. That matters if an agent is producing these weekly.

How your agent can make one

In the API today the closest scene is stat, a single big number with a label, and compare for a left versus right. A short sequence of stat scenes covers the "this went up" story well:

POST /v1/explainers
{
  "brandId": "<your brand kit>",
  "aspect": "16:9",
  "captions": true,
  "script": { "title": "This week", "scenes": [
    { "id": "s1", "type": "title", "durationSec": 3, "headline": "Weekly report" },
    { "id": "s2", "type": "stat", "durationSec": 4, "value": "<your number>", "label": "<what it measures>" },
    { "id": "s3", "type": "stat", "durationSec": 4, "value": "<your second number>", "label": "<what it measures>" }
  ] }
}

The studio only uses numbers you give it. If you send none, it will not make any up. A full animated chart scene is something we use in our own videos and plan to expose.

What it costs

So $1.20 to $1.40 a report on the starter pack.

Get started if you want weekly numbers turned into video.

data charts motion graphics explainers