Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Chart Tooltip with Custom Label

A tooltip headed by a name from the chart's config, Activities, rather than the hovered date, with a line beside each series, in React on Recharts.

Framework
Charting library

Preview

Preview width

About

Use it when the heading should say what is being measured rather than where: Activities above Running and Swimming, Revenue above two products. The date drops out, so it fits charts where the x position is obvious from the hovered bar.

The heading comes from a chartConfig entry with a label and no color, so it lives beside the series names and changes in one place. Each row keeps a line indicator.

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 { ChartTooltipLabelCustom } from "@/components/charts/chart-tooltip-label-custom";
<ChartTooltipLabelCustom />

Customize

  • <ChartTooltipContent indicator="line" labelKey="activities" /> makes the change.
  • chartConfig.activities has a label and no color, so ChartStyle skips it.
  • labelKey can also name a data field whose string value is a chartConfig key.
  • The <Bar>s are unchanged from the default: only the tooltip's props differ.

FAQ

How does the label come from the config?

labelKey="activities" on ChartTooltipContent. It looks the key up in chartConfig and shows chartConfig.activities.label.

Why does the activities entry have no color?

It's a label only. Without a color, ChartContainer writes no --color-activities variable; only the tooltip reads it.

What if I still need the date?

Then the date isn't shown at all. If people need both, drop labelKey and have labelFormatter return both, the word and the formatted date, or keep the date as the label and put the category in the card's title.

Can the heading come from the data instead?

labelKey can also name a data field: when the hovered row's field holds a string that's a chartConfig key, the heading is that entry's label. For a heading from neither, labelFormatter returns any text from the hovered value.

Why the line indicator here?

This variant also sets indicator to line, to show that the options combine. Drop it for the default dot.

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