Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Advanced Chart Tooltip

A tooltip that writes every value in kcal and adds a Total row under the series, on a stacked bar chart in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Use it when the sum matters as much as the parts: calories across activities, revenue across products, time across tasks. It's the formatter variant plus one row: each series gets a swatch, its name and its value in kcal, then a rule and a Total in the same column.

The chart is a stack of running and swimming per day, so the bar's height already shows the total. The tooltip puts the exact number on it, which the chart has no axis to read from.

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 { ChartTooltipAdvanced } from "@/components/charts/chart-tooltip-advanced";
<ChartTooltipAdvanced />

Customize

  • formatter on ChartTooltipContent replaces each row: a swatch, the chartConfig label, then the value and a muted kcal.
  • When index === 1, the formatter also renders the Total row, adding item.payload.running and item.payload.swimming.
  • hideLabel drops the date heading and className="w-[180px]" fixes the width.
  • defaultIndex={1} opens the tooltip on the second day at load; cursor={false} hides the hover band.

FAQ

How is the Total row added?

Inside formatter, after the last row: the callback gets index, and when it's 1 it also renders a Total row that adds item.payload.running and item.payload.swimming. The border-t and basis-full classes put it on its own line.

How do I total more than two series?

Change the index === 1 check to the last index, and sum the payload with Object.keys(chartConfig).reduce(…) rather than naming running and swimming. Each new <Bar> with a chartConfig entry gets its own row.

How do I change the unit?

The kcal span sits in two places in formatter: after each value and after the total. Change both, or keep the unit next to the series in chartConfig and read it from there.

Why does the tooltip have a fixed width?

className="w-[180px]" on ChartTooltipContent fixes the width, so the box doesn't resize as the values change from day to day. Widen it for longer labels or units.

Does a screen reader read the total?

Not on its own. With accessibilityLayer, the arrow keys move between days and the tooltip updates, but ChartTooltipContent isn't a live region, so nothing is announced. The total and its unit are text in the page, so a reader that browses to the tooltip finds them.

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