Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Chart Tooltip with Label Formatter

A tooltip whose heading turns the raw 2024-07-16 into a full date, the format a reader expects, above each series and its value, in React.

Framework
Charting library

Preview

Preview width

About

Use it whenever the x value is a raw key the reader shouldn't have to decode: an ISO date, an id, a timestamp. The ticks stay short weekdays, and the tooltip spells the date out with month, day and year above the usual rows with dots.

It's the default tooltip plus one function, so it's the variant to copy into any time series.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartTooltipLabelFormatter } from "@/components/charts/chart-tooltip-label-formatter";
<ChartTooltipLabelFormatter />

Customize

  • labelFormatter on ChartTooltipContent turns the hovered date into July 16, 2024 with toLocaleDateString.
  • tickFormatter on <XAxis> keeps the ticks as short weekdays.
  • Date-only strings parse as UTC; add timeZone: "UTC" so the day doesn't shift west of UTC.
  • defaultIndex={1} opens the tooltip on the second day at load.

FAQ

How is the label formatted?

labelFormatter={(value) => new Date(value).toLocaleDateString("en-US", { … })} on ChartTooltipContent returns the heading from the hovered date.

Why does the tooltip show the day before?

new Date("2024-07-16") is midnight UTC. West of UTC, that's still July 15 locally, and toLocaleDateString formats the local date. Add timeZone: "UTC" to the options, or build the date from its parts, and the label matches the data. The weekday ticks have the same catch.

How do I show a shorter date?

Change the options: { weekday: "long" } for Tuesday, { month: "short", day: "numeric" } for Jul 16. Pass undefined as the locale to use the reader's own.

Why don't the ticks show the full date too?

tickFormatter on <XAxis> and labelFormatter on ChartTooltipContent are separate. The ticks keep a short weekday so six fit across; the tooltip has room for the full date.

Is labelFormatter only for dates?

No. It receives the label and the payload, so you can return any heading: a week number, a quarter, or a value from the hovered row.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts