dashboardcn

Search documentation

Search for a page or component.

Balance Chart Card

PreviousNext

A balance or price card with a big value, delta, stat row, and a line chart with reference line and peak marker.

Current balance
$24,847.83+12.7%Last 24 hours
Today's sales$1,249.00+8.0%
High$25,900.08
Low$20,850.42
Change-0.062%
import { BalanceChartCard } from "@/registry/dashboardcn/blocks/balance-chart-card"

const data = Array.from({ length: 24 }, (_, hour) => ({

A balance or price card for shadcn/ui: a big value with delta, a row of supporting stats, and a line chart with a reference line and a peak marker. It suits account balances, stock prices, and any headline metric with history.

Installation

pnpm dlx shadcn@latest add @dashboardcn/balance-chart-card

Also installs card, chart, tooltip from shadcn/ui if missing.

Usage

import { BalanceChartCard } from "@/components/balance-chart-card"

<BalanceChartCard
  title="Current balance"
  value={24847.83}
  delta={0.127}
  deltaLabel="Last 24 hours"
  stats={[
    { label: "High", value: 25900.08 },
    { label: "Low", value: 20850.42 },
  ]}
  data={data}
  xKey="time"
  yKey="balance"
  referenceValue={23400}
  referenceLabel="Prev. close"
/>