dashboardcn
1

Metric Tabs Chart Card

PreviousNext

A row of metric tabs, each with a value and delta, above a line chart of the selected metric against the previous period. Click a tab to switch the chart.

"use client"

import { MetricTabsChartCard } from "@/registry/dashboardcn/blocks/metric-tabs-chart-card"

Installation

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

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

Usage

import { MetricTabsChartCard } from "@/components/metric-tabs-chart-card"

<MetricTabsChartCard
  data={data}
  xKey="date"
  metrics={[
    { key: "revenue", compareKey: "revenuePrev", label: "Revenue", format: "currency", fractionDigits: 0 },
    { key: "spend", compareKey: "spendPrev", label: "Ad spend", format: "currency", fractionDigits: 0, invertDelta: true },
    { key: "roas", compareKey: "roasPrev", label: "ROAS", aggregate: "average", fractionDigits: 2 },
    { key: "customers", compareKey: "customersPrev", label: "New customers" },
  ]}
/>