Chart Tooltip

Usage

"use client";

import { ChartTooltip } from "@thenamespace/uikit";

export const DemoDefaultExample = () => (

Anatomy

Import the ChartTooltip component and access all parts using dot notation.

import { ChartTooltip } from "@thenamespace/uikit";

<ChartTooltip>
  <ChartTooltip.Header />
  <ChartTooltip.Item>
    <ChartTooltip.Indicator />
    <ChartTooltip.Label />
    <ChartTooltip.Value />
  </ChartTooltip.Item>
</ChartTooltip>;

Auto Content

"use client";

import { ChartTooltip } from "@thenamespace/uikit";

export const DemoAutoContentExample = () => (

Chart Colors

"use client";

import { ChartTooltip } from "@thenamespace/uikit";

const chartColors = [

Custom Formatters

"use client";

import { ChartTooltip } from "@thenamespace/uikit";

export const DemoCustomFormattersExample = () => (

Inactive

The tooltip below is inactive (active=false) — nothing should render:

(empty — tooltip hidden)

"use client";

import { ChartTooltip } from "@thenamespace/uikit";

export const DemoInactiveExample = () => (

Line Indicator

"use client";

import { ChartTooltip } from "@thenamespace/uikit";

export const DemoLineIndicatorExample = () => (

No Header

"use client";

import { ChartTooltip } from "@thenamespace/uikit";

export const DemoNoHeaderExample = () => (

CSS Classes

Element Classes

.chart-tooltip — Root tooltip card container. Rounded border with surface background and overlay shadow.
.chart-tooltip__header — Optional title row (e.g., the X-axis label). Muted 12px medium text.
.chart-tooltip__item — A single series entry row. Flex layout with gap.
.chart-tooltip__indicator — Color marker next to the series name.
.chart-tooltip__indicator--dot — Dot-shaped indicator. Small circle (8px).
.chart-tooltip__indicator--line — Line-shaped indicator. Tall narrow pill (12px × 4px).
.chart-tooltip__label — Series name text. Muted 12px, fills available space.
.chart-tooltip__value — Series data value. Semibold 12px foreground text.

API Reference

ChartTooltip

The root tooltip container. Controls visibility and indicator style via context.

Prop	Type	Default	Description
`active`	`boolean`	`true`	Controls visibility. When `false`, the tooltip is not rendered.
`indicator`	`"dot" \| "line"`	`"dot"`	Shape of the color indicator next to each series name.
`children`	`ReactNode`	—	Tooltip content — typically `Header`, `Item`, `Indicator`, `Label`, and `Value` sub-components.

Also supports all native div HTML attributes.

ChartTooltip.Content

Auto-renders a tooltip from Recharts payload data. Pass as the content prop of a Recharts <Tooltip>:

<Tooltip content={<ChartTooltip.Content />} />

Prop	Type	Default	Description
`active`	`boolean`	—	Provided by Recharts — whether the tooltip is active.
`label`	`number \| string`	—	Provided by Recharts — the X-axis label for the hovered data point.
`payload`	`RechartsPayloadEntry[]`	—	Provided by Recharts — array of series data for the hovered point.
`hideHeader`	`boolean`	`false`	Hide the header row.
`indicator`	`"dot" \| "line"`	`"dot"`	Shape of the color indicator.
`labelFormatter`	`(label: number \| string) => ReactNode`	—	Custom formatter for the header label.
`valueFormatter`	`(value: number \| string) => ReactNode`	—	Custom formatter for series values.

ChartTooltip.Header

Optional title row rendered above the series items.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Header content (typically the X-axis label text).

Also supports all native div HTML attributes.

ChartTooltip.Item

A single series entry row containing an indicator, label, and value.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Row content — typically `Indicator`, `Label`, and `Value` sub-components.

Also supports all native div HTML attributes.

ChartTooltip.Indicator

Color marker rendered next to the series name. Shape is controlled by the root indicator variant.

Prop	Type	Default	Description
`color`	`string`	—	CSS color value for the indicator background.

Also supports all native span HTML attributes.

ChartTooltip.Label

Series name text displayed between the indicator and value.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Label content (typically the series name or `dataKey`).

Also supports all native span HTML attributes.

ChartTooltip.Value

Series data value displayed at the end of each item row.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Value content (typically the formatted numeric value).

Also supports all native span HTML attributes.