Free
Halden Solace · 16:9
Rendered by this Skill
Bar and Line Chart v1.0.0
An editorial bar-and-line chart builds month by month: bars rise, a line draws across them and every value counts up.
No ratings yet 0 downloads
- Format
- Video · 16:9
- Length
- 0:15
Free Free with an account
Paste this into your agent. It connects the CLI if needed, then installs the Skill.
A free HyperFrames block for 15 seconds of data storytelling in a newspaper style. Gridlines and month labels appear, bars rise one by one with their values, then a line draws across them with its own percentage labels, under a serif headline, a subtitle, a legend and a source line. Months, both data series, scales, labels and titles are edited in the HTML.
Updated Nov 3, 2026
What you get
- A 15-second 1920×1080 chart with a transparent background
- Bars, a line and value labels that build in order
- A serif headline, legend and source line
Good fit
- Results and growth stories
- Investor and board updates
- Explainers and reports
Not for
- More than six periods
- Dense dashboards
About this Skill
You say
/data-chart Make a bar and line chart: "Halden Solace: pairs sold vs. repeat buyers", June to November, pairs sold 9 to 23 thousand and repeat buyers 24% to 44%.
Two numbers that move together make a story: sales and repeat buyers, traffic and sign-ups, revenue and margin. Bar and Line Chart shows both in one calm, editorial chart that builds itself, so viewers read the trend before the voice-over explains it.
How it works
- Ask: tell your agent six months, the values for the bars and the line, the units and a headline.
- Fill: it writes your copy and colours into the block's variables, keeping text close to the length the layout was made for.
- Render: it renders a draft with
npx hyperframes render, checks a few frames and renders the final MP4. - Reuse: the variables live in one small JSON file, so the next version is one more render.
Tips
- Keep the line's scale higher than the bars so its labels never overlap them.
- Name the units in the subtitle and legend.
- The background is transparent, so render it with an alpha channel and lay it over your own footage, photo or a plain colour; the SKILL.md shows the two commands.
- It has no variables: your agent edits the text and numbers directly in the HTML, following the SKILL.md.
Open source
This is a block from the HyperFrames registry, made by HeyGen and the HyperFrames contributors (heygen-com/hyperframes) and shared under the Apache License 2.0. The download is the block with its assets and a SKILL.md written by Reelity, so your agent knows how to fill and render it; HyperFrames itself runs from npm.
What you need before you start
- You bring
- Six periods of data for two measures, the units and a headline.
- Dependencies
- Node.js 22 or newer — required · FFmpeg — required
- Outside costs
- None. HyperFrames is free and open source and renders on your own machine.
- Last tested
- v1.0.0 —
User reviews
No reviews yet. Install the Skill and be the first to rate it.
FAQ
Can I use different periods than months?
Yes. The labels are a list in the script; quarters, years or weeks work.
How do I avoid labels overlapping?
Set the line's maximum lower than the bars' maximum so the line sits above them; our sample does this.
Why is it free?
It is an open-source HyperFrames block by HeyGen and the HyperFrames contributors. We list it as it is, with a SKILL.md so your agent can use it and a sample made with one of our house brands, Halden Solace.
