Ouro HX

Data

ChartTooltip

The tooltip for a recharts chart inside Chart: the category, then each series' marker, label and value from the chart's config, in the theme's popover colors. It follows the pointer, and the arrow keys when the plot has focus. Chart adds it for you with type.

import { ChartTooltip } from "@/components/ouro/chart/chart";

Example

<Chart title="Recipes cooked" data={months} categoryKey="month" config={config}>
  <LineChart>
    <Line dataKey="cooked" stroke="var(--color-cooked)" />
    <ChartTooltip />
  </LineChart>
</Chart>

Usage

Use it only inside a recharts chart passed to Chart as children.

Use instead when

  • Use Chart with type instead when bars, lines or areas are enough: it adds the tooltip itself.

Props

Type: ChartTooltipProps.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

  • content: Not a prop. ChartTooltip draws its own content from the chart's config: <ChartTooltip />.
Source on GitHubThis page as Markdown