Tooltip Chart Custom

"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"

A step-count bar chart whose tooltip is built from scratch as a small card with a big number, unit and day name. Reach for it when the stock tooltip layout can't express what you need, such as a single headline value.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/tooltip-chart-custom

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add charts tooltip-chart-custom

Manual

1. Install the dependencies:

$ pnpm add recharts

2. Add the pieces it builds on: Card, Chart.

3. Copy the source into components/charts/tooltip-chart-custom.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"

4. Update the import paths to match your project.

Usage

import { TooltipChartCustom } from "@/components/charts/tooltip-chart-custom"

<TooltipChartCustom />

Pass your own render function to the content prop of ChartTooltip; it receives the active state, the hovered rows and the label, and should return null when inactive. Change the unit text and number format inside it, and replace chartData and chartConfig as usual.

Notes

A custom tooltip skips the built-in one entirely, so labels and colors from the config only appear if you read them yourself. The tooltip opens on a preset bar when the chart loads; remove defaultIndex to start hidden.