How to make an animated chart video with AI

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page.

Numbers from a CSV or a report as an animated chart: bar race, line, hero number. A step-by-step tutorial for Claude Code, Codex and Grok.

Output: 15–60 s, 16:9, 1:1 or 9:16 MP4 Price: in credits on varg, with a cost estimate before anything runs; the free skills below install in one command.

Recommended route

Best skills for this

  1. HyperFrames (hyperframes, HeyGen, live) — Start here: Chart and data videos rendered from HTML
    • Claude Code: claude plugin marketplace add heygen-com/hyperframes && claude plugin install hyperframes@hyperframes
    • Codex: npx skills add heygen-com/hyperframes --skill hyperframes -a codex
    • Cursor: npx skills add heygen-com/hyperframes --skill hyperframes -a cursor
    • Gemini CLI: npx skills add heygen-com/hyperframes --skill hyperframes -a gemini-cli
    • Details: https://skills.varg.ai/skills/hyperframes.md · Example: https://skills.varg.ai/previews/hyperframes.mp4
  2. Remotion Best Practices (remotion-best-practices, Remotion, live) — Alternative: Charts in React with Remotion
  3. Manim Skills (3Blue1Brown Style) (manim-skill, Adithya S K, live) — Alternative: Precise math-style animation
  4. Three.js Scene Composition (calesthio-threejs-scene-composition, Calesthio, live) — Alternative: Turns a number into a 3D scene (crowds, stacks, a growing city)
  5. HyperFrames Registry (hyperframes-registry, HeyGen, live) — Adds: Chart blocks ready to fill with your data
  6. varg AI (varg-ai, varg, live) — Adds: Voiceover and a music bed for the chart video, on one key
  7. Remotion Maps (remotion-maps, Remotion, live) — Adds: Map-based data stories · Needs: Mapbox, MapTiler or Cesium token for those techniques

Ask the person first

Put these choices in front of the person before spending anything. Paste the example link next to each option: people pick a look by seeing it.

Chart?

Narration?

How to make an animated chart video: step by step

  1. Have the agent study 1 reference video and write down its pacing and first motion
  2. Build data.json with the source next to every number; nothing else may appear on screen
  3. Write story.md: one point, one hero number in the first 3 s, three beats
  4. Build from a chart block (bar race, chart-story) with all text, numbers and timings in one place; axes first, label one thing
  5. Check stills against the data and the reference, give plain-word timing notes, then render with captions or voice and a music bed (under 60 s for social)

What works now (researched 2026-10-27)

Data videos that spread tell a story: an annotated line where every peak is labeled with its event, a bar race with a one-line caption per era, or a number turned into a physical scene. Plain template bar races with no narration are what YouTube now calls inauthentic, and unsourced numbers kill trust.

  1. Keep a facts file: every number on screen comes from it, with its source. Check the query behind each chart before animating. The widely copied motion prompt (128k views, 2,839 bookmarks) makes the facts file the only allowed source for any number, name or claim on screen and bans invented results. A wrong number in a chart video gets quote-tweeted, not shared. (@everestchris6, motion prompt with facts-file rule (X, Sep 2026))
  2. One point per chart. Draw the axes first, then the data, and label only one thing: the line, bar or number the voice is talking about. This is the 'finance chart' rule in the most-saved style map for agent-made explainers (3,715 bookmarks), and the editorial chart skill that got 9,370 bookmarks uses one point per chart with a single highlight color. (@Voxyz_ai, explainer style cards (X, Oct 2026))
  3. Give the chart a narrative: label events on the line, or add a one-line caption for each period of a race. The caption says why the ranking moved. levelsio's annotated trend chart (487k views, 4,741 bookmarks) labels each peak ('Dot-com bubble', '3rd wave: COVID'); the Rock Bands race that hit 392k views writes a short story per era next to the bars. (@levelsio, The Everything Chart (X, Jul 2026))
  4. For social, keep it under 60 s with one hero number in the first 3 s; long races (10+ min) belong on YouTube with chapters. Wistia: under 1 minute is best for social reach and holds 52% of viewers on average; most viewers leave around the halfway point. (Wistia, optimal video length (2026 State of Video data))
  5. Do not mass-produce one race template with swapped datasets and no voice or commentary. YouTube lists 'scrolling text with little narrative value' and 'AI content using generic templates' as inauthentic content that cannot be monetized, and the penalty applies to the whole channel. (YouTube Help, YPP monetization policies (inauthentic content))

Stopped working:

Prompts that work

Templates from the creators of the best current results and from the model guides. Fill in the {CAPS}.

Sourced data story in six small jobs (agent)

The main agent prompt: one point, one hero number, three beats, every figure traced to a source before anything moves Adapted from @francescoinweb3, six small jobs instead of 'make a video' (X, Oct 2026).

Make a {SECONDS}-second {ASPECT} data video about {TOPIC} for {AUDIENCE}. Don't do it in one go: work as six small jobs, each producing one file the next job starts from.

1. reference -> spec.md: watch {REFERENCE_VIDEO} and write down why it works: pacing, first motion, cut rhythm. Study only, never copy.
2. data -> data.json: pull the real numbers from {SOURCES} and keep the source URL and date next to every figure. Nothing appears on screen unless it is in this file.
3. story -> story.md: one point, one hero number ({HERO_NUMBER}), three beats, before anything moves. The hero number is on screen in the first 3 s.
4. motion -> the scene in {HYPERFRAMES_OR_REMOTION}: axes first, then the data; label only the thing the caption talks about; {BRAND_COLORS} plus one highlight color.
5. direct -> timing file: I give notes in plain words ("title is a beat late"); change only that line, re-roll nothing else.
6. ship -> render stills and check each against spec.md and data.json (every number matches its source), then wait for my approval before the final MP4.

Captions or voiceover plus a quiet music bed; under 60 s for social; an end card with "Source: {SOURCE_CREDIT}".

Bar chart race with a caption per era (agent)

Ranked bars over years from a CSV, using a ready HyperFrames block, with a one-line 'why it moved' caption per period Adapted from HyperFrames registry, bar-chart-race block (GitHub).

Build a bar chart race of {METRIC} by {ENTITY}, {START_YEAR}-{END_YEAR}, from {CSV_PATH}, with HyperFrames (install it, then run `hyperframes add bar-chart-race`).

Fill the block's variables from the CSV, not by hand: title "{TITLE}", a subtitle with the unit and the source, the period labels, one series line per entity, bars shown = {N}, seconds per period = {SECONDS_PER_PERIOD}, value prefix or suffix ({UNIT}).

Story per era: write a one-line caption for each period that says WHY the ranking moved ("{EXAMPLE_CAPTION}"), shown beside the bars and timed to its period. Put a logo or icon on a bar only if I supply it.

Open with the most surprising overtake as a 3-second hook, then run from the start. Hold the final ranking 2 s with the leader's exact value.

Checks: every value matches the CSV, the axis rescales smoothly, the accent hands over to the new leader, labels never collide. Render two cuts: a 45-60 s social version around one turning point, and the full run.

Editorial charts, one point each (agent)

A report or CSV turned into short animated charts, each stating one point with one highlighted value Adapted from HyperFrames registry, chart-story component README (GitHub).

Turn {REPORT_OR_CSV} into {N} animated editorial charts for {AUDIENCE}, {ASPECT}, about 5 s each, using the HyperFrames chart-story component.

For each chart:
- One point only. A plain-language headline that states it ("{EXAMPLE_HEADLINE}").
- Pick the form that fits: bars to compare, a line for change over time, a donut for share, progress bars against a target.
- Draw the axes first, then the data in reading order.
- Emphasize ONE value in the accent color with a callout that rolls to the exact value and unit; everything else stays grey.
- Values are the raw numbers from the file, never re-rounded.
- A one-line source under the chart.

Style: calm off-white or dark background, one font family, one accent ({ACCENT}).
Optional voiceover: one sentence per chart, and the callout lands on the word that names the number.
Show me a still of the landed state of every chart before rendering.

Trending formats to remake

To remake one: download the example with the media-download skill, take a frame a second and the transcript, write a beat list (time, shot, camera, on-screen text, sound), keep what the format needs, swap in the person's product or character (never the creator's face, voice, logo or footage), show the beat list and stills before spending, then make it with the skill named below.

  1. Annotated line over time: One or more lines grow across years; each peak and dip gets a short event label; the camera follows the newest point; a dashed projection at the end. Why it spreads: High save ratio: levelsio's chart got 4,741 bookmarks on 3,934 likes (487k views). People save it to reference later. Keep: Lines grow year by year and every peak and dip gets a short event label; the camera follows the newest point; a dashed projection at the end. Swap the series, keep the labels: they are what makes it shareable. Make it with HyperFrames (hyperframes).
  2. Bar race with a story per era: Ranked bars race over decades with logos or photos on the bars, and a short caption beside them explaining what changed in each period. Why it spreads: The classic still works when it narrates: 'Most Popular Rock Bands: Rise & Fall (1960–2026)' got 392k views and 1,760 bookmarks; the same account's footballers race got 125k views. Keep: Ranked bars with logos or photos plus a one-line caption per era that says why the ranking moved; for X or Shorts cut 45-60 s around one turning point. Swap the dataset, keep the per-era captions. Make it with HyperFrames Registry (hyperframes-registry).
  3. Editorial animated chart, one point per chart: FT/NYT-style charts that draw themselves on a calm background: bar, line, dot, unit or ring charts, each with one highlighted value and a one-line headline. Why it spreads: The look people want to copy: an open-source HTML chart skill demoed with these animations got 615k views and 9,370 bookmarks; Mono Charts' animated React charts got 3,556 bookmarks. Keep: Calm background, a plain-language headline that states the point, one highlighted value in one accent color and everything else grey; one chart per point. Swap the data, keep one highlight per chart. Make it with HyperFrames Registry (hyperframes-registry).
    • Example to remake: @lieflat_3 on X, 2026-09-01, 615K views, 9K saves: 53 s scroll through animated charts (Chinese post, open-source skill, 2k stars). Each chart has a plain-language title ('Revenue by plan', 'Where sign-ups come from') and one red highlight. Use it as a style reference.
  4. Number as a scene: The quantity becomes something physical: a crowd per shop, a stack of objects, a city block that grows. A small stat card keeps the exact number readable. Why it spreads: Unit visualizations get shared because the scale is felt, not read: 'Token Town' (OpenRouter tokens as crowds at AI-lab shops) got 226k views and 967 bookmarks. Keep: The quantity becomes something physical (a crowd per shop, a stack, a growing city) while a small stat card keeps the exact number and trend readable. Swap the metaphor to fit your metric, keep the stat card. Make it with Three.js Scene Composition (calesthio-threejs-scene-composition).

Open-source repos

Set up varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.

Related tutorials