Tooltip Chart No Indicator

"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 lists series names and values without any color marker. Use it for single-series charts, or when the series names are clear enough on their own.

Installation

CLI

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

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-indicator

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-indicator.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 { TooltipChartNoIndicator } from "@/components/charts/tooltip-chart-no-indicator"

<TooltipChartNoIndicator />

Set hideIndicator on ChartTooltipContent. Replace chartData and the series in chartConfig, and keep the labels descriptive since they are the only cue.

Notes

With several series and no color marker, readers can't match a row to a bar by color, so this suits one or two clearly named series best.