chartTooltipDefault

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

Implementation notes

Full port. Shared building blocks (dataset, bar-chart option builder, HTML tooltip formatter, card scaffold, pin-open helper) live in src/shadcn/charts/chart-tooltip-shared.ts, reused by all 9 recipes in this family. Uses @domphy/chart's stacked bar chart + axis-trigger TooltipOption.formatter (verified against packages/chart/src/overlay/tooltip.ts as the ONLY tooltip customization hook the engine actually reads at runtime — backgroundColor/borderColor/padding/extraCssText/textStyle are declared on TooltipOption but unused, so the engine's own hardcoded rounded/bordered/shadowed panel chrome already matches the spec's visual description and only the inner row content needed building). Hover-highlight cursor suppressed via axisPointer:{type:'none'} (default) vs 'shadow' when showCursor is on. The 'pinned open on column 2 by default' demo behavior is approximated by dispatching real synthetic mousemove events at the exact column's pixel position, computed with the SAME public createOrdinalScale factory and grid margins the engine's own hit-test uses internally (packages/chart/src/coord/grid.ts) — a genuine simulated hover, not a fabricated tooltip DOM, since TooltipOption.alwaysShowContent/showContent are declared but unimplemented at runtime.

Status: ported · Reference: shadcn/ui original

chartTooltipDefault

// shadcn/ui "charts/tooltip" (default recipe) — clean-room reimplementation.
//
// Baseline stacked-bar chart tooltip: a bordered/rounded/shadowed panel with
// a bold date header and one color-dot + series-name + value row per series.
// No hover-highlight cursor rectangle; the tooltip panel is the only hover
// feedback. Pinned open on the second column by default, matching the live
// documentation preview described in the block's spec.
//
// 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_SERIES_CONFIG,
  ACTIVITY_TOOLTIP_DATA,
  activityBarOption,
  activityTooltipCard,
  activityTooltipFormatter,
  activityTooltipPlot,
  formatWeekdayShort,
  type ActivityDayPoint,
  type ActivitySeriesEntry,
} from "./chart-tooltip-shared.js";

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

/**
 * shadcn/ui "charts/tooltip" default recipe — hover-driven tooltip with a
 * bold date header and a color-dot row per series. Call with no arguments
 * for a working demo.
 */
function chartTooltipDefault(props: ChartTooltipDefaultProps = {}): DomphyElement<"div"> {
  const {
    data = ACTIVITY_TOOLTIP_DATA,
    series = ACTIVITY_SERIES_CONFIG,
    showCursor = false,
    defaultOpenIndex = 1,
    title = "Bar Chart - Tooltip",
    description = "Running vs swimming activity, Jul 15 - Jul 20",
  } = props;

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

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

export { chartTooltipDefault };

← Back to shadcn/ui catalog

chartTooltipDefault#

chartTooltipDefault