chartRadialSimple

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

Implementation notes

Card-shelled five-ring radial bar chart drawn as raw SVG (packages/blocks/src/shadcn/charts/chart-radial-shared.ts: renderRadialRingsChart), not routed through @domphy/chart's chart()/GaugeRenderer — that engine's gauge renderer draws only one track+progress arc per series at a shared radius and its tooltip hit-testing explicitly skips type:'gauge' series (verified in packages/chart/src/engine.ts), so building the concentric multi-ring layout + hover tooltip there would mean adding engine features, out of scope for a blocks-only task. Instead each ring is a stroked <path> arc (flat caps, stroke-dasharray/dashoffset grow-in via ui's motion()) over a pale full-circle <circle> track; sweep = value/max*360 from the top, five-hue accent rotation (primary/secondary/success/warning/info). Hover tooltip is a custom absolutely-positioned HTML overlay (swatch + category name) that follows the cursor via mousemove on each arc, reusing ui's card/heading/paragraph/small/strong patches and the existing chart-area-shared.ts card-shell/trend-footer helpers (chartTrendFooter gained an optional showIcon flag, backward compatible). Sample dataset (5 channel categories) is original, not copied from upstream. tsc --noEmit clean; 2/2 tests pass.

Status: ported · Reference: shadcn/ui original

chartRadialSimple

// shadcn/ui "chart-radial" (default/"simple" recipe) — clean-room
// reimplementation.
//
// A card-framed radial bar chart: five concentric rings (one per category),
// each swept proportionally to its value against a pale full-circle track,
// with flat arc ends and a rotating five-hue accent palette. Hovering a ring
// shows a small swatch+label 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 { chartCardShell, chartTrendFooter, type ChartTrendDirection } from "./chart-area-shared.js";
import {
  RADIAL_CHANNEL_DATA,
  createRadialTooltip,
  renderRadialRingsChart,
  type RadialSeriesDatum,
} from "./chart-radial-shared.js";

export interface ChartRadialSimpleProps {
  data?: RadialSeriesDatum[];
  title?: string;
  description?: string;
  trendText?: string;
  trendDirection?: ChartTrendDirection;
  captionText?: string;
  showBackgroundTrack?: boolean;
  outerRadius?: number;
  innerRadius?: number;
}

/**
 * shadcn/ui "chart-radial" default recipe — a five-ring radial bar chart
 * with a trend footer. Call with no arguments for a working demo.
 */
function chartRadialSimple(props: ChartRadialSimpleProps = {}): DomphyElement<"div"> {
  const {
    data = RADIAL_CHANNEL_DATA,
    title = "Radial Chart",
    description = "January - June 2026",
    trendText = "Trending up by 5.2% this month",
    trendDirection = "up",
    captionText = "Showing total sessions by acquisition channel",
    showBackgroundTrack = true,
    outerRadius,
    innerRadius,
  } = props;

  const tooltip = createRadialTooltip();

  return chartCardShell({
    title,
    description,
    content: {
      div: [
        renderRadialRingsChart({
          data,
          tooltip,
          showBackgroundTrack,
          outerRadius,
          innerRadius,
          sweepMode: "value",
        }),
      ],
    },
    footer: chartTrendFooter({ trendText, direction: trendDirection, captionText }),
  });
}

export { chartRadialSimple };

← Back to shadcn/ui catalog

chartRadialSimple#

chartRadialSimple