chartRadialLabel

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

Implementation notes

Same ring-chart base as chartRadialSimple (renderRadialRingsChart, sweepMode:'extended'): sweep is scaled across a domain running from just before the top to ~380deg (20deg past a full turn) with a minSweepDegrees floor (default 40) so every ring — even the smallest — keeps enough arc length for its label. Inline per-ring category labels are rendered as always-visible HTML <small> elements positioned near each arc's leading edge via percentage coordinates computed from the same SVG coordinate space (not SVG <text>, so they can reuse the small() ui patch and stay legible without touching inline typography styles), colored with a light theme tone (shift-1 of the ring's own accent) rather than the upstream's mix-blend-mode trick — matches the researchNote's own suggested clean-room simplification ('light/dark label color based on contrast'). Same tooltip-on-hover behavior as chartRadialSimple. tsc --noEmit clean; 2/2 tests pass.

Status: ported · Reference: shadcn/ui original

chartRadialLabel

// shadcn/ui "chart-radial-label" recipe — clean-room reimplementation.
//
// The same five-ring radial bar chart as chartRadialSimple, but every ring
// additionally sweeps across a domain that runs slightly past a full turn
// (with a floor so even the shortest ring keeps some length) and carries its
// own category name as a small always-visible label near the arc's leading
// edge.
//
// 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 ChartRadialLabelProps {
  data?: RadialSeriesDatum[];
  title?: string;
  description?: string;
  trendText?: string;
  trendDirection?: ChartTrendDirection;
  captionText?: string;
  showBackgroundTrack?: boolean;
  showInlineLabels?: boolean;
  minSweepDegrees?: number;
  maxSweepDegrees?: number;
}

/**
 * shadcn/ui "chart-radial-label" recipe — five rings with inline category
 * labels near each arc's start. Call with no arguments for a working demo.
 */
function chartRadialLabel(props: ChartRadialLabelProps = {}): DomphyElement<"div"> {
  const {
    data = RADIAL_CHANNEL_DATA,
    title = "Radial Chart - Label",
    description = "January - June 2026",
    trendText = "Trending up by 5.2% this month",
    trendDirection = "up",
    captionText = "Showing total sessions by acquisition channel",
    showBackgroundTrack = true,
    showInlineLabels = true,
    minSweepDegrees,
    maxSweepDegrees,
  } = props;

  const tooltip = createRadialTooltip();

  return chartCardShell({
    title,
    description,
    content: {
      div: [
        renderRadialRingsChart({
          data,
          tooltip,
          showBackgroundTrack,
          showInlineLabels,
          sweepMode: "extended",
          minSweepDegrees,
          maxSweepDegrees,
        }),
      ],
    },
    footer: chartTrendFooter({ trendText, direction: trendDirection, captionText }),
  });
}

export { chartRadialLabel };

← Back to shadcn/ui catalog

chartRadialLabel#

chartRadialLabel