Twin Column Chartv1.0.1
Use this Skill to make an infographic.
A column chart skill for Claude Fable 5: two series side by side for each day of a quarter, under a total tile for each, as React source on ECharts.
Picked most often by
Updated Nov 6, 2026
Preview gallery
Similar Skills
View all
What you get
- Twin Column Chart as editable source: the card with its two total tiles, the ECharts panel and a usage example of a bakery's site and app visits.
- Smaller chart-only variants, plus the palette, type, radius, icon and motion tokens from references/theme.md.
- An ECharts option holding both series as plain arrays, so your numbers replace the sample directly.
Good fit
- Reports that compare two channels, sites or teams for every day of a period.
- Pages where each series' total belongs right next to the daily detail.
- Projects that want paired columns from a real charting library in the page's own colors.
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.
- Comparisons of more than two series in one card.
About this Skill
Twin Column Chart is a comparison chart skill for Claude Fable 5, built for two series you want to read day by day, such as website visits against app visits. The card's header sets a title and short description beside two tiles, one per series, each holding that series' sum for the whole period; click one to mark it. Underneath, ECharts draws a teal and an amber column for every day, rounded at the top, with a legend and a tooltip that gives both values. A row missing one value is pointed out, never quietly drawn as zero. The package also carries smaller versions of the chart on its own, adding grid, axis, tooltip and legend one at a time.
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
- Both series are drawn through ECharts as columns side by side in every category, rounded at the top
- Each tile's total is the sum of its series, and the tooltip gives both values at the category under the cursor
- 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
- A title, a short description and the two series to compare, each with a name for its tile · One row per category, such as each day of a quarter, with a number for both series
- 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 if a day is missing one of the two values?
The agent points it out instead of drawing it as zero without saying so. Each tile's total is the sum of its own series. The block is React; in another framework the agent rebuilds it and keeps ECharts for the columns.
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.