Revenue chart
MRR, revenue and subscriber tabs over a 7D/30D/90D/12M range, where the area path morphs between ranges and a scrubbing crosshair rolls the value in a tooltip.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { RevenueChart } from '@/components/component-kit/items/block-revenue-chart';
export function Example() { return <RevenueChart defaultMetric="mrr" defaultRange="30d" />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
getSeries | (metric: RevenueMetric, range: RevenueRange) => RevenuePoint[] | deterministic demo series | Returns { label, value } points for a metric and range. |
defaultMetric | "mrr" | "revenue" | "subscribers" | "mrr" | Metric tab selected on first render. |
defaultRange | "7d" | "30d" | "90d" | "12m" | "30d" | Range selected on first render. |
compact | boolean | false | Chart and range toggle only, for small previews. |
autoPlay | boolean | false | Cycle ranges and sweep the crosshair on a loop. |