dashboardcn
1

Period Bar Chart Card

PreviousNext

A card with a total for the selected period, a range switcher, and a bar chart that highlights that period. Click a bar to select its period.

Spending
$10,420.00
+126.7%Mar spending vs Feb
"use client"

import { PeriodBarChartCard } from "@/registry/dashboardcn/blocks/period-bar-chart-card"

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/period-bar-chart-card.json

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

Usage

import { PeriodBarChartCard } from "@/components/period-bar-chart-card"

<PeriodBarChartCard
  title="Spending"
  data={data}
  xKey="week"
  yKey="spend"
  groupKey="month"
  valueLabel="spending"
  color="var(--color-orange-500)"
  ranges={[
    { value: "1y", label: "1Y", points: 48 },
    { value: "6m", label: "6M", points: 24 },
    { value: "3m", label: "3M", points: 12 },
  ]}
  defaultRange="6m"
/>