chartTooltipFormatter

A Charts block/component from shadcn/ui — clean-room reimplemented for Domphy (see methodology). Call chartTooltipFormatter() with no arguments for a working demo, or edit the code below live.

Implementation notes

Full port. Default header kept; each row's value goes through monoUnitValueRenderer (tabular/monospace number + small muted unit suffix) wrapped in a min-width span so digits realign as values change length. Shares the exact same value-cell renderer function as chartTooltipAdvanced, deliberately separated from the total-row/no-header behavior per the family's own research note that formatter and total-row are two independently composable capabilities.

Status: ported · Reference: shadcn/ui original

// shadcn/ui "charts/tooltip" (formatter recipe) — clean-room reimplementation.
//
// Keeps the default date header and color-dot indicator, but renders each
// row's value through a custom formatter: a monospace/tabular number
// immediately followed by a small, lighter-colored unit abbreviation, with a
// minimum row width so the numbers line up as their digit count changes.
//
// Implemented purely from the block's public functional/visual spec — no
// upstream shadcn/ui source was viewed or copied.

import type { DomphyElement } from "@domphy/core";
import {
  ACTIVITY_ENERGY_UNIT,
  ACTIVITY_SERIES_CONFIG,
  ACTIVITY_TOOLTIP_DATA,
  activityBarOption,
  activityTooltipCard,
  activityTooltipFormatter,
  activityTooltipPlot,
  formatWeekdayShort,
  monoUnitValueRenderer,
  type ActivityDayPoint,
  type ActivitySeriesEntry,
} from "./chart-tooltip-shared.js";

export interface ChartTooltipFormatterProps {
  data?: ActivityDayPoint[];
  series?: ActivitySeriesEntry[];
  showCursor?: boolean;
  defaultOpenIndex?: number | null;
  unit?: string;
  minRowWidthPx?: number;
  title?: string;
  description?: string;
}

/**
 * shadcn/ui "charts/tooltip" formatter recipe — mono/tabular value +
 * muted unit suffix per row, enforcing a minimum row width. Call with no
 * arguments for a working demo.
 */
function chartTooltipFormatter(props: ChartTooltipFormatterProps = {}): DomphyElement<"div"> {
  const {
    data = ACTIVITY_TOOLTIP_DATA,
    series = ACTIVITY_SERIES_CONFIG,
    showCursor = false,
    defaultOpenIndex = 1,
    unit = ACTIVITY_ENERGY_UNIT,
    minRowWidthPx = 56,
    title = "Bar Chart - Tooltip Formatter",
    description = "Custom value formatter with a minimum row width",
  } = props;

  const categories = data.map((point) => formatWeekdayShort(point.date));
  const formatter = activityTooltipFormatter(data, series, {
    renderValue: monoUnitValueRenderer(unit),
    minRowWidthPx,
  });
  const option = activityBarOption({ data, categories, series, showCursor, formatter });

  return activityTooltipCard({
    title,
    description,
    plot: activityTooltipPlot({ option, categories, defaultOpenIndex }),
  });
}

export { chartTooltipFormatter };

← Back to shadcn/ui catalog

chartTooltipFormatter#

chartTooltipFormatter