dashboardcn
2

Goal Chart Card

PreviousNext

A card with a total, a period switcher, and a bar chart with a dashed goal line that colors the bars reaching it.

Steps
31,600total steps
+12.0%vs last week
"use client"

import * as React from "react"

Installation

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

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

Usage

import { GoalChartCard } from "@/components/goal-chart-card"

<GoalChartCard
  title="Steps"
  unit="total steps"
  data={steps}
  xKey="day"
  yKey="steps"
  goal={4000}
  color="var(--color-emerald-500)"
  delta={0.12}
  deltaLabel="vs last week"
  periods={[
    { value: "week", label: "Week" },
    { value: "month", label: "Month" },
  ]}
  onPeriodChange={setPeriod}
/>