Night Balance Chartv1.0.1
Use this Skill to make an infographic.
A balance chart skill for Claude Fable 5: a dark card with the headline amount, a strip of day figures and one smooth amber ECharts line, as React source.
Picked most often by
Updated Nov 6, 2026
Preview gallery
Similar Skills
View all
What you get
- Night Balance Chart as editable source: the card, the ECharts panel and a usage example filled with a month of sample takings.
- Theme tokens from references/theme.md for colors, type, radius, icon stroke and motion, edited in one place.
- One ECharts option object holding the axis labels and values as plain arrays, so new data needs no chart code.
Good fit
- Wallet, payout or treasury screens that lead with one balance and its trend.
- Shop dashboards showing a month of daily takings next to today's figure.
- Teams who want a chart drawn by a proper library yet styled like the rest of their page.
Not for
- Products that already follow a design system of their own; this block's palette and type scale would compete with it.
- Anyone wanting a versioned package from npm; you receive source code and keep it up to date yourself.
- Live tick-by-tick prices or streaming feeds; the chart draws the values you hand it.
About this Skill
Night Balance Chart is a finance-style chart skill for Claude Fable 5, for wallets and shop takings. At the top of a dark card the balance sits in large type, with its move over the last 24 hours beside it. A strip underneath holds today's payouts and their change on the left and the period's high, low and swing on the right. The chart below runs one smooth amber line through a month of daily values, drawn by ECharts with no point markers over dotted guide lines. Move the pointer across it and a tooltip names the day and its value with thousands separators. Uneven labels and values get flagged instead of drawn as a line that stops short.
How it works
- Say which page gets the block; the agent studies package.json and the framework config, then writes it in the project's own idiom.
- Swap in your own titles and labels; the theme tokens keep sizes and spacing in place.
- Hand over your real series; ECharts redraws them in the same colors and axes.
- Run scripts/check-blocks.mjs, then view the page at phone width before it goes live.
Checked before delivery
- The line is drawn once through ECharts, smooth and without point markers, in the accent colour
- The tooltip names the label under the cursor and its value with thousands separators
- scripts/check-blocks.mjs reports no symbol icons, no off-palette blue or violet and no remote files
What you need before you start
- You bring
- The headline amount with its change, and the figures for the strip above the chart, such as today, high, low and swing · One label and one value per point for the line, such as each day of a month
- Dependencies
- ECharts 5 or newer, installed with your project's package manager
- Outside costs
- None
- Last tested
- v1.0.1 — Claude Code / Cursor
User reviews
Loading reviews…
FAQ
What numbers does the card need?
The headline amount and its change, the figures for the strip (such as today, high, low and swing), and one label and value per point for the line. The source is React; in another framework the agent rebuilds the card and keeps ECharts for the chart.
Does the block fetch anything online?
No. Fonts, icons and pictures stay as local files, and scripts/check-blocks.mjs flags any src, href or url() pointing at another host.
How do my own numbers get in?
ECharts reads one option object whose labels and values are plain arrays. Replace them and the colors, tooltip and animation stay put.