Radial Chart

Usage

"use client";

import type { ReactNode } from "react";

import { RadialChart } from "@thenamespace/uikit";

Anatomy

Import the RadialChart component and access all parts using dot notation.

import { RadialChart } from "@thenamespace/uikit";

<RadialChart>
  <RadialChart.AngleAxis />
  <RadialChart.Bar>
    <RadialChart.Cell />
  </RadialChart.Bar>
  <RadialChart.Tooltip />
</RadialChart>;

Gauge

"use client";

import type { ReactNode } from "react";

import { RadialChart } from "@thenamespace/uikit";

Gauge Grid

"use client";

import type { ReactNode } from "react";

import { RadialChart } from "@thenamespace/uikit";

Progress Ring

"use client";

import type { ReactNode } from "react";

import { RadialChart } from "@thenamespace/uikit";

With Legend

"use client";

import type { ReactNode } from "react";

import { RadialChart } from "@thenamespace/uikit";

CSS Classes

Element Classes

• .radial-chart — Root container wrapping ResponsiveContainer and the Recharts chart.

Recharts Theming

The following CSS rules target Recharts internal class names to apply Namespace UIKit design tokens automatically:

• .radial-chart .recharts-tooltip-cursor — Tooltip cursor. Hidden for radial charts.
• .radial-chart .recharts-tooltip-wrapper — Tooltip wrapper. Elevated z-index to render above center content.
• .radial-chart .recharts-radial-bar-background-sector — Bar background track. Uses the separator token for a subtle fill.

API Reference

RadialChart

The root wrapper. Renders a ResponsiveContainer + Recharts RadialBarChart with Namespace UIKit CSS theming applied automatically.

Also supports all native div HTML attributes.

RadialChart.Bar

Re-exported Recharts RadialBar component. Follows the Recharts RadialBar API.

RadialChart.Cell

Re-exported Recharts Cell component. Follows the Recharts Cell API.

RadialChart.AngleAxis

Re-exported Recharts PolarAngleAxis component. Follows the Recharts PolarAngleAxis API.

RadialChart.Tooltip

Re-exported Recharts Tooltip component. Follows the Recharts Tooltip API. Use with RadialChart.TooltipContent for styled tooltips.

RadialChart.TooltipContent

Pre-built tooltip renderer for Recharts. Pass as the content prop of RadialChart.Tooltip. See ChartTooltip for full props.