# Tooltip Chart Custom

> A bar chart whose tooltip is fully custom markup, showing a large total, a unit and the day.

A shadcn/ui block from the [@esuiss](https://suiss.app/ui?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/esuiss/tooltip-chart-custom).

- Page, with a live preview: https://shadcn.exchange/r/esuiss/tooltip-chart-custom
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/esuiss/tooltip-chart-custom-light-7cd4a68369aa90c1.png
- Registry item: https://suiss.app/ui/r/new-york-v4/tooltip-chart-custom.json
- Categories: charts, charts-tooltip
- Listed: 2026-10-20, source last changed 2026-10-20

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/esuiss/tooltip-chart-custom.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `recharts`
- Registry items: `@esuiss/card`, `@esuiss/chart`

## Files

### `components/charts/tooltip-chart-custom.tsx`

```tsx
"use client"

import { Bar, BarChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
} from "@/components/ui/chart"

const chartData = [
  { day: "Monday", steps: 8412 },
  { day: "Tuesday", steps: 10230 },
  { day: "Wednesday", steps: 6120 },
  { day: "Thursday", steps: 12480 },
  { day: "Friday", steps: 9050 },
  { day: "Saturday", steps: 14320 },
  { day: "Sunday", steps: 4870 },
]

const chartConfig = {
  steps: { label: "Steps", color: "var(--chart-4)" },
} satisfies ChartConfig

export function TooltipChartCustom() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Custom content</CardTitle>
        <CardDescription>A tooltip built from scratch</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-52 w-full"
        >
          <BarChart
            accessibilityLayer
            data={chartData}
            margin={{ top: 70, right: 4, left: 4, bottom: 0 }}
          >
            <XAxis
              dataKey="day"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              interval={0}
              tickFormatter={(value: string) => value.slice(0, 3)}
            />
            <ChartTooltip
              defaultIndex={5}
              cursor={false}
              content={({ active, payload, label }) => {
                const entry = payload?.[0]
                if (!active || !entry) return null
                return (
                  <div className="min-w-28 rounded-xl bg-popover px-3 py-2 shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10">
                    <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                      Total
                    </p>
                    <p className="flex items-baseline gap-1">
                      <span className="text-2xl font-semibold tabular-nums">
                        {Number(entry.value).toLocaleString("en-US")}
                      </span>
                      <span className="text-xs font-semibold text-muted-foreground">
                        steps
                      </span>
                    </p>
                    <p className="text-xs text-muted-foreground">{label}</p>
                  </div>
                )
              }}
            />
            <Bar
              dataKey="steps"
              fill="var(--color-steps)"
              radius={4}
              maxBarSize={26}
            />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```