Tooltip Chart Dot

"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 that shows the default tooltip indicator, a small colored square beside each series. It is the most compact indicator and the one you get without setting anything.

Installation

CLI

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

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

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-dot.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 { TooltipChartDot } from "@/components/charts/tooltip-chart-dot"

<TooltipChartDot />

Leave indicator unset or set it to dot 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.