Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Chart Tooltip with Icons

A tooltip that marks each series with its icon, footprints for running and waves for swimming, set once in the chart's config, in React.

Framework
Charting library

Preview

Preview width

About

Use it when each series is a kind of thing with an obvious symbol: an activity, a device, a channel. The icon sits where the dot would, next to the series name and its value, and the date heading is hidden to keep the tooltip short.

The icons live in chartConfig, not in the tooltip, so a legend on the same chart picks them up too.

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

Customize

  • icon: Footprints and icon: Waves in chartConfig do the work; ChartTooltipContent renders them in place of the dot.
  • <ChartTooltip content={<ChartTooltipContent hideLabel />} /> drops the date heading.
  • Icons are styled by the row's [&>svg]:size-2.5 [&>svg]:text-muted-foreground classes.
  • Import the icons from lucide-react; any component that renders an <svg> works.

FAQ

Where do the icons come from?

From chartConfig: running: { icon: Footprints, … }. When an entry has an icon, ChartTooltipContent renders it in place of the indicator.

Can I use other icons?

Any React component works as icon: another Lucide icon or your own SVG. The row sizes it to size-2.5 and colors it text-muted-foreground through [&>svg]: classes.

Do the icons show in a legend too?

Yes. ChartLegendContent reads the same icon from chartConfig; pass hideIcon to keep the color swatches instead.

Why aren't the icons in the series' colors?

The icon replaces the series' color mark, and it draws in the muted text color, not the series color. That's why the name sits beside it: the icon helps recognition, the name is the label.

Are the icons read by a screen reader?

They're decorative: the series name is text in the same row, so a screen reader reads Running and its value. Don't let an icon replace the name.

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