Event Count Barsv1.0.1
Use this Skill to make an infographic.
A bar chart skill for Claude Fable 5: one slim, round-topped teal bar per day under a large title and a source line, delivered as React source on ECharts.
Picked most often by
Updated Nov 6, 2026
Preview gallery
Similar Skills
View all
What you get
- Event Count Bars as editable source: the bar card, the ECharts panel and a sample loader holding ten days of counts.
- references/theme.md: colors, type sizes, corner radius, icon stroke and motion timings, kept as tokens in one place.
- The chart's ECharts option as plain data, with the labels and counts in arrays you replace.
Good fit
- Status, support or operations pages that report a single count per day.
- Public stats pages that need a clear title and a stated source above the chart.
- Projects that want a real charting library under one small card, not a hand-drawn SVG.
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.
- Several series in one view; this card plots a single count per label.
About this Skill
Event Count Bars is a bar chart skill for Claude Fable 5 for anything you tally once a day: tickets, sign-ups, incidents, late trains. The card leads with a large title and a line naming where the counts come from. Each label gets one teal bar, rounded at the top and capped in width, so a short run of days never turns into wide slabs. Hover a bar to see its label and count over dotted guide lines. The bundled sample loader returns { title, series }; swap in your own and ECharts plots what comes back, styled by your page's tokens.
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
- Every count is one bar drawn through ECharts, rounded at the top and no wider than the set's bar width
- The axis uses compact numbers and the tooltip names the label and count 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 and a source line for the card · One label and one count per bar, such as the last ten days
- 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
Where do the counts come from?
From a small loader that returns a title and a series of { date, count } points. Swap the bundled sample for your own loader and the bars follow. The block is React; in another framework the agent rebuilds it and keeps ECharts for the bars.
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.