Tooltip Chart No Label

"use client"

import { Bar, BarChart, XAxis } from "recharts"

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

A stacked bar chart whose tooltip drops the category heading and shows only the series rows. Use it when the hovered category is obvious from the axis and you want a smaller tooltip.

Installation

CLI

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

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-no-label

Manual

1. Install the dependencies:

$ pnpm add recharts

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

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

"use client"

import { Bar, BarChart, XAxis } from "recharts"

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

4. Update the import paths to match your project.

Usage

import { TooltipChartNoLabel } from "@/components/charts/tooltip-chart-no-label"

<TooltipChartNoLabel />

Set hideLabel on ChartTooltipContent. Replace chartData and the series in chartConfig with your own.

Notes

The tooltip opens on a preset month when the chart loads; remove defaultIndex if it should start hidden.