Tooltip Chart Formatter

"use client"

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

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

A week of active-energy bars whose tooltip row is rewritten by a formatter to show a name, value and kcal unit. Use a formatter like this when values need units, thousands separators or extra context.

Installation

CLI

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

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

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-formatter.tsx:

"use client"

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

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

4. Update the import paths to match your project.

Usage

import { TooltipChartFormatter } from "@/components/charts/tooltip-chart-formatter"

<TooltipChartFormatter />

Pass a formatter to ChartTooltipContent; it receives each row's value and name and returns the markup for that row. Change the label text, number format and unit inside it, and replace chartData and chartConfig with your series.

Notes

Dates are parsed at noon so the weekday labels don't shift a day in time zones behind UTC; keep that if you use date strings as categories.