> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# RadialChart
> Visualize categorical data as concentric rings.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
RadialChart renders each data item as a concentric ring, with length proportional to its value. Like PieChart, it uses `data_key` for numeric values and `name_key` for labels. Adjust `inner_radius` to control how tight the rings are.
## Basic Usage
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components.charts import RadialChart
data = [
{"browser": "Chrome", "visitors": 275},
{"browser": "Safari", "visitors": 200},
{"browser": "Firefox", "visitors": 187},
{"browser": "Edge", "visitors": 173},
{"browser": "Other", "visitors": 90},
]
RadialChart(
data=data,
data_key="visitors",
name_key="browser",
show_legend=True,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "RadialChart",
"data": [
{"browser": "Chrome", "visitors": 275},
{"browser": "Safari", "visitors": 200},
{"browser": "Firefox", "visitors": 187},
{"browser": "Edge", "visitors": 173},
{"browser": "Other", "visitors": 90}
],
"dataKey": "visitors",
"nameKey": "browser",
"height": 300,
"innerRadius": 30,
"startAngle": 180,
"endAngle": 0,
"showLegend": true,
"showTooltip": true,
"animate": true,
"valueFormat": "auto"
}
}
```
## Tight Rings
Increase `inner_radius` to push rings outward, creating a tighter radial layout.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
RadialChart(
data=[
{"browser": "Chrome", "visitors": 275},
{"browser": "Safari", "visitors": 200},
{"browser": "Firefox", "visitors": 187},
{"browser": "Edge", "visitors": 173},
{"browser": "Other", "visitors": 90},
],
inner_radius=80,
data_key="visitors",
name_key="browser",
show_legend=True,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "RadialChart",
"data": [
{"browser": "Chrome", "visitors": 275},
{"browser": "Safari", "visitors": 200},
{"browser": "Firefox", "visitors": 187},
{"browser": "Edge", "visitors": 173},
{"browser": "Other", "visitors": 90}
],
"dataKey": "visitors",
"nameKey": "browser",
"height": 300,
"innerRadius": 80,
"startAngle": 180,
"endAngle": 0,
"showLegend": true,
"showTooltip": true,
"animate": true,
"valueFormat": "auto"
}
}
```
## Semicircle
Adjust `start_angle` and `end_angle` to render rings as a partial arc instead of a full circle. For example, `start_angle=90` and `end_angle=-270` produces a semicircle opening to the right.
```python Python {5-6} icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
RadialChart(
data=data,
data_key="visitors",
name_key="browser",
start_angle=90,
end_angle=-270,
show_legend=True,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "RadialChart",
"data": [
{"browser": "Chrome", "visitors": 275},
{"browser": "Safari", "visitors": 200},
{"browser": "Firefox", "visitors": 187},
{"browser": "Edge", "visitors": 173},
{"browser": "Other", "visitors": 90}
],
"dataKey": "visitors",
"nameKey": "browser",
"height": 300,
"innerRadius": 30,
"startAngle": 90,
"endAngle": -270,
"showLegend": true,
"showTooltip": true,
"animate": true,
"valueFormat": "auto"
}
}
```
## Tooltip Formatting
Use `value_format` to format tooltip values with the same pipe strings as Prefab expressions and data table columns. Compact formatting keeps large radial values readable when users hover each ring.
```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components.charts import RadialChart
data = [
{"service": "Compute", "cost": 186_000},
{"service": "Storage", "cost": 92_000},
{"service": "Network", "cost": 48_000},
{"service": "Support", "cost": 24_000},
]
RadialChart(
data=data,
data_key="cost",
name_key="service",
value_format="compact:0",
show_legend=True,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "RadialChart",
"data": [
{"service": "Compute", "cost": 186000},
{"service": "Storage", "cost": 92000},
{"service": "Network", "cost": 48000},
{"service": "Support", "cost": 24000}
],
"dataKey": "cost",
"nameKey": "service",
"height": 300,
"innerRadius": 30,
"startAngle": 180,
"endAngle": 0,
"showLegend": true,
"showTooltip": true,
"animate": true,
"valueFormat": "compact:0"
}
}
```
## API Reference
Data as a list of dicts, or a `{{ field }}` interpolation reference.
The data field containing numeric values to plot as ring lengths.
The data field containing labels for each ring.
Chart height in pixels.
Inner radius in pixels. Increase to push rings outward.
Starting angle in degrees for the radial layout.
Ending angle in degrees for the radial layout.
Show a legend below the chart.
Show tooltips on hover.
Format tooltip values with an expression pipe such as `currency`, `currency:EUR`, `percent:1`, or `compact:0`.
Additional Tailwind CSS classes.
## Protocol Reference
```json RadialChart theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "RadialChart",
"id?": "string",
"onMount?": "any",
"data": "object[] | string (required)",
"dataKey": "string (required)",
"nameKey": "string (required)",
"height?": "300",
"innerRadius?": 30,
"startAngle?": "180",
"endAngle?": 0,
"showLegend?": true,
"showTooltip?": true,
"animate?": true,
"valueFormat?": "string",
"cssClass?": "string"
}
```
For the complete protocol schema, see [RadialChart](/protocol/radial-chart).