Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Chart Tooltip without Label

The smallest tooltip: no heading and no color marks, only each series' name and value, for charts where the hovered point speaks for itself.

Framework
Charting library

Preview

Preview width

About

Strip the tooltip to its rows: each series' name and value, no date on top and no dot beside them. Use it on small charts where the hovered bar and its axis tick already say where you are, and the tooltip only needs the numbers.

It's the default tooltip with two options turned on, so it's easy to bring either part back.

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

Customize

  • <ChartTooltipContent hideIndicator hideLabel /> makes the change.
  • The <XAxis> ticks keep the weekday on screen.
  • defaultIndex={1} opens the tooltip on the second day; cursor={false} hides the hover band.

FAQ

Which options make this tooltip?

<ChartTooltipContent hideIndicator hideLabel />: the first drops the dots, the second the date heading.

When can I drop the label?

When the x position is plain from what's hovered: a few bars with their names on the axis, or a single point. If the reader could lose track of which day they're on, keep the label.

Can I hide the label but keep the dots?

Yes: <ChartTooltipContent hideLabel />. The Icons and Advanced variants also hide the label and keep a mark beside the name.

What does a screen reader hear?

The tooltip text: the names and values, without the day. Keep the axis ticks, so the day is still on screen.

Does anything else change?

Only the heading and the marks; the rows still follow the series in chartConfig, with their values in font-mono so they line up.

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