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.

Minimal animated line graph v1.0.0

Use this resource to animate a line graph in a video

New

  • 307 downloads
  • 116 likes
  • 101 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install minimal-line-graph-animation

First time: connect the CLI with

npx --yes palatekit@latest login

The agent fills an animated line graph with your value series and axis labels. Lines draw on, dots pop in and values ride the draw front, with a dim axis and a legend. You get a clear video sequence for a report or a presentation.

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 (CONFIG, duration, render)
  • mk-line-graph.html: 7-second composition with two sample series
  • registry-item.json: HyperFrames install descriptor

Good fit for

  • Growth recaps for a client or investors
  • Monthly results videos
  • Courses or posts that illustrate a trend

Not for

  • Charts with more than two series
  • Data that needs precise line-by-line reading

Tags

  • graph
  • line chart
  • data
  • report
  • animation

About

You say

"Animate a line graph of my signups and sales from January to June, with values shown."

Two lines drawing on a plain background with dots, value labels following the line, and a legend.

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

Show more

Prerequisites

You bring
Your number series (one or two) and The horizontal axis labels
Dependencies
HyperFrames (Node.js 22 and FFmpeg)

How to use it

  1. Install the block in your HyperFrames project
  2. Replace series and xLabels in CONFIG
  3. Render the video with the HyperFrames render command

Content preview

Files

  • LICENSE10.5 KB
  • mk-line-graph.html10 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.7 KB
  • registry-item.json0.6 KB

Origin and licence

Modified by PalateKit

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

Notice

Version modifiée de « Minimal Line Graph » (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

How many points and series?

One or two series of equal length; xLabels needs at least as many labels as values.

How do I change the colours?

Give each series a colour in CONFIG.series or redefine the --mk-* CSS variables.