ChartTooltip

ImportCopy Anchor Link

import { ChartTooltip } from '@nizivo/charts/chart-tooltip';

Static or interactiveCopy Anchor Link

Server. ChartTooltip has no 'use client' and imports no client module (island-graph.test.ts in packages/charts/test/unit). It is only the card: showing it at a point, placing it and announcing the point are the ChartInteraction island's job, which AreaChart and BarChart render. The island imports this card, so a page with an interactive AreaChart or BarChart ships it as part of the island's client graph (the island, this card and cx). How to choose.

ExamplesCopy Anchor Link

BasicCopy Anchor Link

import type { JSX } from 'react';
import { ChartTooltip } from '@nizivo/charts/chart-tooltip';

export function ChartTooltipExample(): JSX.Element {
  return (
    <ChartTooltip
      title="Tue, Oct 14"
      rows={[{ label: 'This period', value: '$6,284', series: 'current' }]}
    />
  );
}

CompareCopy Anchor Link

import type { JSX } from 'react';
import { ChartTooltip } from '@nizivo/charts/chart-tooltip';

export function ChartTooltipCompareExample(): JSX.Element {
  return (
    <ChartTooltip
      title="Tue, Oct 14"
      rows={[
        { label: 'This period', value: '$6,284', series: 'current' },
        { label: 'Previous', value: '$4,910', series: 'previous' },
      ]}
      delta={{ value: '+28.0%', label: 'vs previous', trend: 'up' }}
    />
  );
}

DownCopy Anchor Link

import type { JSX } from 'react';
import { ChartTooltip } from '@nizivo/charts/chart-tooltip';

export function ChartTooltipDownExample(): JSX.Element {
  return (
    <ChartTooltip
      title="Wed, Oct 15"
      rows={[
        { label: 'This period', value: '$3,980', series: 'current' },
        { label: 'Previous', value: '$4,620', series: 'previous' },
      ]}
      delta={{ value: '−13.9%', label: 'vs previous', trend: 'down' }}
    />
  );
}

PropsCopy Anchor Link

Server component. Props: ChartTooltipProps. Source: src/chart-tooltip/chart-tooltip.tsx.

• Also takes every <div> attribute except children, title.

ChartTooltipRow: label (the series name), value (pre-formatted, Numeric/M, tabular) and series (a ChartSeries, the swatch's colour role). ChartTooltipDelta: value (the change with its sign, for example "+28.0%"), label (for example "vs previous") and trend ('up' | 'down' | 'flat'); their members are under Other exports. delta and delta.label also accept undefined, so a computed value can be passed as it is under exactOptionalPropertyTypes.

Other exportsCopy Anchor Link

ChartTooltipDelta type

import type { ChartTooltipDelta } from '@nizivo/charts/chart-tooltip'

Name	Type	Default	Description
label	string	–	For example "vs previous".
trendrequired	ChartTrend "up" | "down" | "flat"	–	up reads text/success, down text/critical, flat text/secondary.
valuerequired	string	–	The pre-formatted change with its sign, for example "+28.0%": the sign is the non-colour cue.

ChartTooltipProps type

import type { ChartTooltipProps } from '@nizivo/charts/chart-tooltip'

The props of ChartTooltip, listed above.

ChartTooltipRow type

import type { ChartTooltipRow } from '@nizivo/charts/chart-tooltip'

Name	Type	Default	Description
labelrequired	string	–	The series name, for example "This period".
seriesrequired	ChartSeries "current" | "previous" | "cat-1" | "cat-2" | "cat-3" | "other"	–	The colour role of the row's swatch.
valuerequired	string	–	The pre-formatted value, for example "$6,284" (Numeric/M, tabular).

ChartTrend type

import type { ChartTrend } from '@nizivo/charts/chart-tooltip'

The direction of a change, as data-trend (contracts/vocabulary.json). Sparkline derives it from its data; ChartTooltip takes it from delta.trend (AreaChart derives that from the change).

type ChartTrend = "up" | "down" | "flat"

Data attributes and slotsCopy Anchor Link

The change reads text/success for up, text/critical for down and text/secondary for flat.

CSS hooksCopy Anchor Link

Layers: nz.components. Classes: .nz-chart-interaction, .nz-chart-interaction-columns, .nz-chart-interaction-dot, .nz-chart-interaction-point, .nz-chart-interaction-tip, .nz-chart-tooltip, .nz-chart-tooltip-change, .nz-chart-tooltip-delta, .nz-chart-tooltip-label, .nz-chart-tooltip-row, .nz-chart-tooltip-rows, .nz-chart-tooltip-swatch, .nz-chart-tooltip-title, .nz-chart-tooltip-value. Runtime variables: --nz-surface.

--nz-chart-tooltip-width is the card's width (Figma: a fixed 200 px), and --nz-chart-tooltip-halo the ring around the island's point dots: the surface behind the chart. When the hook is unset, the ring takes the shared --nz-surface that @nizivo/react's Card declares for its children (KpiTile and TrendCard are Cards, so a tinted tile's halo is its own surface), else --nz-bg-surface. Charts read --nz-surface only if it is there: without @nizivo/react on the page it is unset and the halo is --nz-bg-surface, and @nizivo/charts does not depend on @nizivo/react (M42).

AccessibilityCopy Anchor Link

• The rows are a description list: each series name is a <dt>, its value the <dd>. The swatch is aria-hidden.
• The sign of the change ("+", "−") carries its direction without colour.
• Inside the island the whole card is aria-hidden: the island's polite live region speaks the point, and the chart's data table carries every value. Rendered on its own, the card is ordinary text.

FigmaCopy Anchor Link

Chart Tooltip, 7275:13303: Series=1 7275:13304 (200 × 75) and Series=2 7275:13310 (200 × 133, with the delta row). "Follows the crosshair; flips side near edges. Fade + 4px travel, duration/fast. Values in Numeric/M (tabular)." The Area and Bar hover variants use a duplicate set, 747:287, which is on no page; code follows 7275:13303. Notes: docs/figma/03-data-viz.md §4.2.