Revenue chart

Bars for this period and a dashed line for the last, a tooltip on hover or the arrow keys, in plain SVG.

$ pnpm dlx shadcn@latest add @dashral/revenue-chart

When to use

Revenue over time: bars for this period, a dashed line for the last, and a tooltip on hover or the arrow keys.
Finance and sales dashboards comparing a period with the one before.

When not to use

Many metrics to switch between: Analytics overview picks the one the chart shows.
Totals without a time axis: a Bar List or a Donut Chart.

Usage

Revenue chart with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { RevenueChart } from "@/components/dashral/blocks/revenue-chart"
2
3<RevenueChart
4  title="Revenue"
5  ranges={ranges}
6  range={range}
7  onRangeChange={setRange}
8  currency="EUR"
9  locale="de-DE"
10/>

API reference

RevenueChart

Revenue over a year or a month: bars for this period and a dashed line for the one before, on a round axis. Hover a bar, or focus the chart and use the arrow keys, to read a point; the total and its change sit above it. Plain SVG and divs, no chart library; with reduced motion the bars are simply there. Every part comes from props: your ranges and their bars; with range and onRangeChange you load a range's bars as it's picked.

Prop	Type	Default
`title`	`React.ReactNode`	`"Revenue"`
`ranges`	`RevenueRange[]`	`sample`
`range`	`string` The range picked (the chart keeps it without it).	—
`onRangeChange`	`(range: string) => void`	—
`currency`	`string`	`"USD"`
`locale`	`string`	`"en-US"`

type Point

A bar: its label on the axis ("" for none), its full name when read, this period's value and the one before.

Prop	Type	Default
`label`	`string`	—
`long`	`string`	—
`value`	`number`	—
`previous`	`number`	—

type RevenueRange

A range on the switch: its label there, what the line compares with, and its bars.

Prop	Type	Default
`value`	`string`	—
`label`	`string`	—
`compare`	`string`	—
`points`	`Point[]`	—