Tooltip Chart Dashed

"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 dashed tooltip indicator, which marks each series with a dashed outline in its color. Compare it with the dot and line variants to pick the indicator that fits your design.

Installation

CLI

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

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

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

<TooltipChartDashed />

Set indicator on ChartTooltipContent to dashed; the same setting works on any chart. Replace chartData and the series in chartConfig to use your own data.

Notes

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