Tooltips

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/chart.json

Chart imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Every chart shares one foundation, the chart component — installing it also adds recharts. The examples on this page are what you copy into your own components.

A few interactive examples are built with other components from this site — card, toggle-group, tabs and select. Add the ones an example imports; the chart itself needs none of them.

Series are painted from a five-colour palette. The CLI adds these variables for you; on a manual install, add them to your global CSS:

:root {
  --chart-1: oklch(0.63 0.23 36);
  --chart-2: oklch(0.55 0.2 252);
  --chart-3: oklch(0.58 0.16 145);
  --chart-4: oklch(0.78 0.18 75);
  --chart-5: oklch(0.52 0.015 260);
}

.dark {
  --chart-1: oklch(0.72 0.19 36);
  --chart-2: oklch(0.66 0.19 252);
  --chart-3: oklch(0.68 0.17 145);
  --chart-4: oklch(0.85 0.17 75);
  --chart-5: oklch(0.72 0.012 260);
}

@theme inline {
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
}

import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart'

const data = [
  { day: 'Mon', vans: 184, bikes: 92 },
  { day: 'Tue', vans: 206, bikes: 118 },
]

const config = {
  vans: { label: 'Vans' },
  bikes: { label: 'Bikes', color: 'var(--chart-4)' },
} satisfies ChartConfig

// ChartTooltip is Recharts' Tooltip. Give it ChartTooltipContent as its content and tune the
// content with props: indicator, hideLabel, hideIndicator, labelFormatter, formatter, nameKey.
// To start with the tooltip open on one column, set defaultIndex.
<ChartContainer config={config}>
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="day" tickLine={false} axisLine={false} />
    <ChartTooltip
      content={
        <ChartTooltipContent
          indicator="dashed"
          labelFormatter={label => `${label} deliveries`}
          formatter={value => `${value} parcels`}
        />
      }
    />
    <Bar dataKey="vans" fill="var(--color-vans)" radius={4} />
    <Bar dataKey="bikes" fill="var(--color-bikes)" radius={4} />
  </BarChart>
</ChartContainer>

// Need something the props can't express (icons, a total row)? Pass your own component as
// `content`. Recharts gives it `active`, `label` and `payload`; render ChartTooltipContent
// inside it to keep the stock rows and add your own around them.