Tooltip Chart Icons

"use client"

import { DesktopIcon, DeviceMobileIcon } from "@phosphor-icons/react"
import { Bar, BarChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,

A stacked bar chart whose tooltip shows a small icon for each series instead of a color swatch. Use icons when series map to recognizable things, like device types, and color alone isn't enough to tell them apart.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/tooltip-chart-icons

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add charts tooltip-chart-icons

Manual

1. Install the dependencies:

$ pnpm add @phosphor-icons/react recharts

2. Add the pieces it builds on: Card, Chart.

3. Copy the source into components/charts/tooltip-chart-icons.tsx:

"use client"

import { DesktopIcon, DeviceMobileIcon } from "@phosphor-icons/react"
import { Bar, BarChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,

4. Update the import paths to match your project.

Usage

import { TooltipChartIcons } from "@/components/charts/tooltip-chart-icons"

<TooltipChartIcons />

Add an icon component to each series entry in chartConfig; the tooltip picks it up automatically. Replace chartData and the series keys to match your data.

Notes

Icons replace the color indicator in every tooltip and legend that uses this config, so add them only where you want them everywhere. The tooltip opens on a preset month when the chart loads.