Tooltip Chart Interactive

"use client"

import * as React from "react"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
import { Switch } from "@/components/ui/switch"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

A stacked quarterly revenue chart with live controls for every tooltip option: indicator style, hover or click trigger, a total in the title, and hiding the title or indicator. Use it to try combinations before copying the settings into your own chart.

Installation

CLI

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

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

Manual

1. Install the dependencies:

$ pnpm add recharts

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

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

"use client"

import * as React from "react"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
import { Switch } from "@/components/ui/switch"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

4. Update the import paths to match your project.

Usage

import { TooltipChartInteractive } from "@/components/charts/tooltip-chart-interactive"

<TooltipChartInteractive />

Pick the combination you like, then copy the matching props into your chart: indicator, hideLabel and hideIndicator go on the tooltip content, and trigger on ChartTooltip. The total in the title comes from a label formatter that sums the rows.

Notes

With the click trigger, the tooltip appears only after a bar is clicked and stays in place as the pointer moves. Every control is a labeled, keyboard-operable switch or toggle group.