Skip to content
38

Charts.

Chart cards built on the shadcn chart primitive: bar, area, donut and funnel, each with a range or series control that swaps the data and a summary that reads the numbers for you.

4 blocks, live at full size, install from here

01 / 04Year select, stacked or grouped bars, bar totals, computed summary

Chart 01

Monthly revenue bar chart by plan with a year select, a stacked or grouped toggle, totals above the bars and a summary line computed from the data.

npx shadcn@latest add https://hirael.com/r/chart-01.json

02 / 04Range toggle, series toggles, shared crosshair, period deltas

Chart 02

Traffic area charts for visitors and signups with a 7, 30 or 90 day range, legend cards that turn each series on or off, and a crosshair tooltip shared across both panels.

npx shadcn@latest add https://hirael.com/r/chart-02.json

03 / 04Donut with centre total, ranked legend, linked hover, period toggle

Chart 03

Revenue by channel donut with the total in the centre and a ranked list of value, share and change. Hovering a row highlights its slice and hovering a slice highlights its row.

npx shadcn@latest add https://hirael.com/r/chart-03.json

04 / 04Funnel bars, step conversion, drop-off, segment toggle

Chart 04

Signup funnel from visited to subscribed, showing the count, share of visitors, step conversion and drop-off at each step, with an All, Organic or Paid segment toggle.

npx shadcn@latest add https://hirael.com/r/chart-04.json