Billing History Chart

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing64.tsx instead.

Usage

The file also exports billing64Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing64, billing64Demo } from "@/components/blocks/billing/billing64";

export default function Page() {
  return <Billing64 {...billing64Demo} />;
}

Props

Types

interface HistoryPoint {
  label: string;
  amount: number;
}

Behavior notes

• Switching the monthly/quarterly toggle swaps which points array is used and redraws the SVG path and circles; there's no built-in transition between datasets.
• The total shown above the chart is the sum of the currently active dataset's amounts, not a fixed value.
• The trend arrow and percentage compare only the last two points of the active dataset. With fewer than two points it shows a flat (no-change) indicator.
• The line is a plain SVG path scaled to the active dataset's own maximum value, so the vertical scale resets when switching periods rather than sharing one fixed axis.
• Each data point renders a native SVG <title> for hover text, and a visually hidden table below the chart lists every point's label and amount for screen readers.

Frequently asked questions