Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Animated bar and line chart in a newspaper style v1.0.0

Use this resource to animate a numbers chart in a video

New

  • 381 downloads
  • 235 likes
  • 152 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install animated-bar-line-chart

First time: connect the CLI with

npx --yes palatekit@latest login

The agent replaces the sample data (months, revenue, conversion rate) with yours and updates the headline, subtitle and source. Bars rise, the line draws and values appear one by one. You get a 15-second sequence in a sober editorial style.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames (Node.js 22 and FFmpeg)
Licence
Apache-2.0

Similar resources

View all

What you get

  • README.md: usage guide (data, colours, render)
  • data-chart.html: 15-second composition with six sample months
  • registry-item.json: install descriptor and colour parameters

Good fit for

  • Business reports or client recaps on video
  • Teaching content that comments on statistics
  • Results presentations for investors

Not for

  • Interactive dashboards
  • Datasets of more than about ten points

Tags

  • chart
  • bar chart
  • statistics
  • report
  • animation

About

You say

"Animate a chart with my revenue and conversion rate from January to June, cream background, source: our internal tool."

Clean editorial chart with grey bars, a blue line, a serif headline and value labels.

Block published by HeyGen (HyperFrames) under the Apache-2.0 license.

Show more

Prerequisites

You bring
Your numbers (bars and line) and The headline, subtitle and source to display
Dependencies
HyperFrames (Node.js 22 and FFmpeg)

How to use it

  1. Install the block in your HyperFrames project
  2. Replace the months, revenueData and conversionData arrays, then the texts
  3. Render the video with the HyperFrames render command

Content preview

Files

  • data-chart.html13.5 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.8 KB
  • registry-item.json1 KB

Origin and licence

Modified by PalateKit

Author
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/blocks/data-chart
Licence
Apache-2.0

Notice

Version modifiée de « Data Chart » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Where do I change the numbers?

At the top of the script: the months, revenueData and conversionData arrays; headline, subtitle and source are in the HTML.

Can I change the colours?

Yes: background and text are set by --bg-color (#faf9f6) and --text-color (#333333), and bars and line in the CSS.