---
title: RadialChart
description: Visualize categorical data as concentric rings.
icon: circle-notch
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

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

<ComponentPreview json={{"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}}} playground=" ">
<CodeGroup>
```python Python icon="python"
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"
{
  "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
  }
}
```
</CodeGroup>
</ComponentPreview>

## Tight Rings

Increase `inner_radius` to push rings outward, creating a tighter radial layout.

<ComponentPreview json={{"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}}} playground="UmFkaWFsQ2hhcnQoCiAgICBkYXRhPVsKICAgICAgICB7ImJyb3dzZXIiOiAiQ2hyb21lIiwgInZpc2l0b3JzIjogMjc1fSwKICAgICAgICB7ImJyb3dzZXIiOiAiU2FmYXJpIiwgInZpc2l0b3JzIjogMjAwfSwKICAgICAgICB7ImJyb3dzZXIiOiAiRmlyZWZveCIsICJ2aXNpdG9ycyI6IDE4N30sCiAgICAgICAgeyJicm93c2VyIjogIkVkZ2UiLCAidmlzaXRvcnMiOiAxNzN9LAogICAgICAgIHsiYnJvd3NlciI6ICJPdGhlciIsICJ2aXNpdG9ycyI6IDkwfSwKICAgIF0sCiAgICBpbm5lcl9yYWRpdXM9ODAsCiAgICBkYXRhX2tleT0idmlzaXRvcnMiLAogICAgbmFtZV9rZXk9ImJyb3dzZXIiLAogICAgc2hvd19sZWdlbmQ9VHJ1ZSwKKQo=">
<CodeGroup>
```python Python icon="python"
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"
{
  "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
  }
}
```
</CodeGroup>
</ComponentPreview>

## 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.

<ComponentPreview json={{"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}}} playground="UmFkaWFsQ2hhcnQoCiAgICBkYXRhPWRhdGEsCiAgICBkYXRhX2tleT0idmlzaXRvcnMiLAogICAgbmFtZV9rZXk9ImJyb3dzZXIiLAogICAgc3RhcnRfYW5nbGU9OTAsCiAgICBlbmRfYW5nbGU9LTI3MCwKICAgIHNob3dfbGVnZW5kPVRydWUsCikK">
<CodeGroup>
```python Python {5-6} icon="python"
RadialChart(
    data=data,
    data_key="visitors",
    name_key="browser",
    start_angle=90,
    end_angle=-270,
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "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
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="RadialChart Parameters">
<ParamField body="data" type="list[dict] | str" required>
  Data as a list of dicts, or a `{{ field }}` interpolation reference.
</ParamField>

<ParamField body="data_key" type="str" required>
  The data field containing numeric values to plot as ring lengths.
</ParamField>

<ParamField body="name_key" type="str" required>
  The data field containing labels for each ring.
</ParamField>

<ParamField body="height" type="int" default="300">
  Chart height in pixels.
</ParamField>

<ParamField body="inner_radius" type="int" default="30">
  Inner radius in pixels. Increase to push rings outward.
</ParamField>

<ParamField body="start_angle" type="int" default="180">
  Starting angle in degrees for the radial layout.
</ParamField>

<ParamField body="end_angle" type="int" default="0">
  Ending angle in degrees for the radial layout.
</ParamField>

<ParamField body="show_legend" type="bool" default="False">
  Show a legend below the chart.
</ParamField>

<ParamField body="show_tooltip" type="bool" default="True">
  Show tooltips on hover.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

## Protocol Reference

```json RadialChart
{
  "type": "RadialChart",
  "data": "Action[] | string (required)",
  "dataKey": "string (required)",
  "nameKey": "string (required)",
  "height?": "300",
  "innerRadius?": 30,
  "startAngle?": "180",
  "endAngle?": 0,
  "showLegend?": false,
  "showTooltip?": true,
  "cssClass?": "string"
}
```

For the complete protocol schema, see [RadialChart](/protocol/radial-chart).
