# antuikit / Recharts Tooltip

> A responsive frame for one Recharts chart that paints its grid, axes, cursor and labels with the theme's chart colors and exposes each series color as `var(--series-<key>)`.

Docs: https://antuikit.com/docs/components/recharts-tooltip

## Install

npx antuikit@latest init
npx antuikit@latest add recharts-chart

## Import

import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/recharts-chart";

## Demos

- [Line indicator](https://ui.antuikit.com/embed/recharts-tooltip/indicator-line.md): Set `indicator="line"` on `ChartTooltipContent` to mark each row with a short vertical bar instead of a dot.
- [Dashed indicator](https://ui.antuikit.com/embed/recharts-tooltip/indicator-dashed.md): Set `indicator="dashed"` on `ChartTooltipContent` to mark each row with a dashed line in the series color.
- [Hide label](https://ui.antuikit.com/embed/recharts-tooltip/hide-label.md): Pass `hideLabel` to `ChartTooltipContent` to drop the title row and show only the series values.
- [Hide indicator](https://ui.antuikit.com/embed/recharts-tooltip/hide-indicator.md): Pass `hideIndicator` to drop the color marker, useful for a single series, here with a `formatter` that adds the unit.
- [Legend icons](https://ui.antuikit.com/embed/recharts-tooltip/legend-icons.md): Give a `ChartConfig` entry an `icon` and `ChartLegendContent` draws it in the series color instead of the dot.
- [Custom content](https://ui.antuikit.com/embed/recharts-tooltip/custom-content.md): Pass your own component to the tooltip's `content` to show anything for the hovered item, like a short summary of each department.
- [Tooltip styles](https://ui.antuikit.com/embed/recharts-tooltip/tooltip-styles.md): Style the built-in tooltip with `contentStyle` for the box, `itemStyle` for each row and `labelStyle` for the title.
- [Legend hover](https://ui.antuikit.com/embed/recharts-tooltip/legend-hover-opacity.md): Handle the legend's `onMouseEnter` and `onMouseLeave` to fade the other lines while you hover one series in the legend.
- [Legend styles](https://ui.antuikit.com/embed/recharts-tooltip/legend-styles.md): Style the built-in legend with `wrapperStyle`, `labelStyle`, `iconType` and `iconSize`, and set `inactiveColor` for hidden series.
- [Legend position](https://ui.antuikit.com/embed/recharts-tooltip/legend-position.md): Move the legend with `position`, `layout` and `offset`, from outside edges like `bottom` to corners inside the plot area.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/recharts-chart`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.