chartRadarDefault

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

Implementation notes

Drawn as raw SVG (shared geometry/tooltip helpers in src/shadcn/charts/chart-radar-shared.ts) instead of routed through @domphy/chart's WebGL RadarRenderer, because packages/chart/src/engine.ts explicitly skips type: "radar" series in its hit-test loop, so the engine has no hover-tooltip support for radar at all - verified by reading engine.ts, not guessed. Nearest-category hover detection is a manual angle-from-center calculation on mousemove (not a browser hit-test); the mount 'grow from center' animation is approximated via a CSS scale(0)->scale(1) transform (motion() patch) with transformOrigin: "center", which resolves against the SVG's own viewBox (not the polygon's bounding box) per the CSS Transforms spec's view-box default for SVG content - a true per-vertex path-growth animation isn't available through WAAPI for polygon points. Centered card header (title+description) required a small family-local radarCardShell since the shared cross-family chartCardShell is left-aligned only.

Status: ported · Reference: shadcn/ui original

chartRadarDefault

// shadcn/ui "charts/radar" (default recipe) — clean-room reimplementation.
//
// A card-framed single-series radar chart: six month spokes on a hexagonal
// polygon grid, one translucent accent-colored data shape connecting the
// six values. Hovering resolves the nearest spoke and shows a small
// swatch+label+value tooltip near the cursor.
//
// 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 { chartTrendFooter, type ChartTrendDirection } from "./chart-area-shared.js";
import {
  RADAR_SINGLE_SERIES,
  RADAR_MONTHLY_SINGLE_DATA,
  createRadarTooltip,
  radarCardShell,
  renderRadarChart,
  type RadarPoint,
  type RadarSeriesConfig,
} from "./chart-radar-shared.js";

export interface ChartRadarDefaultProps {
  data?: RadarPoint[];
  series?: RadarSeriesConfig[];
  title?: string;
  description?: string;
  trendText?: string;
  trendDirection?: ChartTrendDirection;
  captionText?: string;
  fillOpacity?: number;
  showDots?: boolean;
}

/**
 * shadcn/ui "charts/radar" default recipe — a single-series hexagonal radar
 * chart with a trend footer. Call with no arguments for a working demo.
 */
function chartRadarDefault(props: ChartRadarDefaultProps = {}): DomphyElement<"div"> {
  const {
    data = RADAR_MONTHLY_SINGLE_DATA,
    series = RADAR_SINGLE_SERIES,
    title = "Radar Chart",
    description = "January - June 2026",
    trendText = "Trending up by 5.2% this month",
    trendDirection = "up",
    captionText = "Showing total visitors for the last 6 months",
    fillOpacity,
    showDots = false,
  } = props;

  const resolvedSeries: RadarSeriesConfig[] =
    fillOpacity === undefined ? series : series.map((entry) => ({ ...entry, fillOpacity }));

  const tooltip = createRadarTooltip();

  return radarCardShell({
    title,
    description,
    content: {
      div: [
        renderRadarChart({
          data,
          series: resolvedSeries,
          tooltip,
          showDots,
          tooltipShowLabel: true,
          tooltipIndicator: "swatch",
        }),
      ],
    },
    footer: chartTrendFooter({ trendText, direction: trendDirection, captionText }),
  });
}

export { chartRadarDefault };

← Back to shadcn/ui catalog

chartRadarDefault#

chartRadarDefault