Tooltip Chart Line

"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 line tooltip indicator, a thin vertical bar in each series' color. It reads cleanly in dense tooltips and pairs well with line and area charts.

Installation

CLI

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

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

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

<TooltipChartLine />

Set indicator on ChartTooltipContent to line. 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.