Tooltip Chart Label Formatter

"use client"

import * as React from "react"
import { Area, AreaChart, XAxis } from "recharts"

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

Two weeks of active energy as a gradient area, where the axis shows only day numbers but the tooltip heading spells out the weekday. Use a label formatter when the axis needs short labels and the tooltip has room for the full context.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/tooltip-chart-label-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-label-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-label-formatter.tsx:

"use client"

import * as React from "react"
import { Area, AreaChart, XAxis } from "recharts"

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

4. Update the import paths to match your project.

Usage

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

<TooltipChartLabelFormatter />

Pass a labelFormatter to ChartTooltipContent and build the heading from the hovered record, which arrives in its second argument. Adjust the date format there, for example to add the year when your range spans more than one year.

Notes

The demo format shows the weekday, month and day, so ranges that cross a month boundary stay clear. It leaves out the year.