Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Revenue Chart Dashboard Block for Svelte

Twelve months of revenue as columns that regroup into quarters, where pinning a column fills a side cell with its total, its change on the period before and its split by plan.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See how revenue moved and what one period was made of, with this revenue chart panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner draws the twelve months to September 2026 as hand-built columns on a dollar scale, and a Toggle Group in the header regroups them into four quarters. Pressing a column, or pressing Enter on it, pins it: the side cell then shows that period's revenue as a large figure, its change against the period before, and its split across Starter, Team and Scale as a stacked bar with the amount and share of each plan, while a polite line under the chart reads the pinned period aloud. Switching between months and quarters keeps the pinned month's place. It's built from Toggle Group, Badge and Guides, with the columns in plain markup. For revenue reports and finance consoles.

FAQ

How do I fill it with my own revenue?

Edit MONTHS: each month has a short label, a full name and the revenue on each plan in dollars. The columns, the quarters (three months added plan by plan), the scale, the change, the split and the header's total are all worked out from those, so they never disagree. Rename the three plans in PLANS.

How do I pin a period without a pointer?

Every column is a real button inside a list, named with its period and total, so Tab reaches it and Enter or Space pins it. The pinned column is dark and marked with aria-pressed, and the status line says which period is pinned and how it changed. A table under the chart, hidden visually, lists every period by plan for screen readers.

What does grouping by quarter do to the pin?

It moves the pin to the quarter that holds the pinned month, and moving back to months pins that quarter's last month. The quarters are Q4 2025 (October to December) through Q3 2026, so the first one has no earlier quarter to be compared with and says so.

What stays local, and how do I wire it for real?

Everything: the revenue is typed and nothing is read from a billing system. To make it real, load monthly revenue by plan from your ledger or your payment provider's reports, keep the unit in dollars or convert it, and pass the same array.

How does it look on a phone?

The chart keeps all twelve columns but labels every other month, the side cell moves under the chart, and the pinned figure and the split read the same. The columns are always drawn left to right, also in a right-to-left page, because time runs that way on a chart.

All 200 dashboard blocks