---
title: RadialChart
description: "`RadialChart` is a component for drawing radial charts to compare multiple sets of data."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart/radial-chart.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/chart
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-chart-radialchart--basic
---

```tsx
interface Data {
  browser: string
  visits: number
  fill?: CSSProps["fill"]
}

const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo<Data[]>(
  () =>
    RadialChart.mergeData([
      {
        browser: "chrome",
        visits: faker.number.int({ max: 5000, min: 1000 }),
      },
      {
        browser: "edge",
        visits: faker.number.int({ max: 5000, min: 1000 }),
      },
      {
        browser: "firefox",
        visits: faker.number.int({ max: 5000, min: 1000 }),
      },
      {
        browser: "opera",
        visits: faker.number.int({ max: 5000, min: 1000 }),
      },
      {
        browser: "safari",
        visits: faker.number.int({ max: 5000, min: 1000 }),
      },
      {
        browser: "other",
        visits: faker.number.int({ max: 5000, min: 1000 }),
      },
    ]),
  [],
)

return <RadialChart.Root data={data} series={series} />
```

## Usage

```tsx
import { RadialChart } from "@yamada-ui/react"
```

```tsx
import { RadialChart } from "@/components/ui"
```

```tsx
import { RadialChart } from "@workspaces/ui"
```

```tsx
<RadialChart.Root>
  <RadialChart.Radial>
    <RadialChart.LabelList />
  </RadialChart.Radial>
  <RadialChart.Label />
  <RadialChart.Grid />
  <RadialChart.RadiusAxis />
  <RadialChart.AngleAxis />
  <RadialChart.Tooltip />
  <RadialChart.Legend />
</RadialChart.Root>
```

### Composition

```tsx
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return (
  <RadialChart.Root data={data}>
    <RadialChart.Radial dataKey="visits" nameKey="browser">
      <RadialChart.LabelList
        dataKey="browser"
        offset={4}
        position="insideStart"
      />
    </RadialChart.Radial>
    <RadialChart.Tooltip />
    <RadialChart.Legend />
  </RadialChart.Root>
)
```

### Change Size

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return (
  <VStack>
    <For each={["xs", "sm", "md", "lg", "xl"]}>
      {(size, index) => (
        <RadialChart.Root key={index} data={data} series={series} size={size} />
      )}
    </For>
  </VStack>
)
```

### Change Color

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(
  () => RadialChart.mergeData(createPolarChartData(), "blue"),
  [],
)

return <RadialChart.Root data={data} series={series} />
```

### Change Sector Colors

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo<Data[]>(
  () =>
    createPolarChartData().map((item, index) => ({
      ...item,
      fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
    })),
  [],
)

return <RadialChart.Root data={data} series={series} />
```

### Add Legend

To add the legend, set `withLegend` to `true`. To change placement, set `legendProps.placement` to `"start-start"`, `"end-end"`, etc. The default is `"start-end"`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo<Data[]>(
  () =>
    createPolarChartData().map((item, index) => ({
      ...item,
      fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
    })),
  [],
)

return <RadialChart.Root data={data} series={series} withLegend />
```

### Add Label

To display labels, set `label` or `radialProps.label` to `true`. The default is `false`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(
  () => RadialChart.mergeData(createPolarChartData(), "blue"),
  [],
)

return (
  <RadialChart.Root data={data} radialProps={{ label: true }} series={series} />
)
```

### Add Label List

To display label list, set `labelList` or `radialProps.labelList` to `true`. The default is `false`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return (
  <RadialChart.Root
    data={data}
    radialProps={{ labelList: true }}
    series={series}
  />
)
```

### Add Center Label

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(
  () =>
    RadialChart.mergeData([
      { browser: "chrome", visits: faker.number.int({ max: 5000, min: 1000 }) },
      { browser: "edge", visits: faker.number.int({ max: 5000, min: 1000 }) },
      { browser: "safari", visits: faker.number.int({ max: 5000, min: 1000 }) },
    ]),
  [],
)
const total = useMemo(
  () => data.reduce((acc, { visits }) => acc + visits, 0),
  [data],
)

return (
  <VStack>
    <RadialChart.Root data={data} innerRadius="60%" series={series}>
      <RadialChart.Label fontSize="5xl" fontWeight="bold" position="center">
        Visitors
      </RadialChart.Label>
    </RadialChart.Root>

    <RadialChart.Root data={data} innerRadius="60%" series={series}>
      <RadialChart.Label
        content={({ className, viewBox }) => {
          if (!viewBox) return null
          if (!("cx" in viewBox) || !("cy" in viewBox)) return null

          return (
            <text
              className={className}
              dominantBaseline="middle"
              textAnchor="middle"
              x={viewBox.cx}
              y={viewBox.cy}
            >
              <styled.tspan asChild fontSize="6xl" fontWeight="bold">
                <tspan x={viewBox.cx} y={viewBox.cy}>
                  {total.toLocaleString()}
                </tspan>
              </styled.tspan>

              <styled.tspan asChild color="fg.muted" fontSize="xl">
                <tspan x={viewBox.cx} y={viewBox.cy + 36}>
                  Visitors
                </tspan>
              </styled.tspan>
            </text>
          )
        }}
      />
    </RadialChart.Root>
  </VStack>
)
```

### Change Start Angle

To change the start angle, set `startAngle` to a number. The default is `90`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return <RadialChart.Root data={data} series={series} startAngle={0} />
```

### Change End Angle

To change the end angle, set `endAngle` to a number. The default is `-270`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return <RadialChart.Root data={data} endAngle={-180} series={series} />
```

### Change Inner Radius

To change the inner radius, set `innerRadius` to a number or string. The default is `"20%"`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return <RadialChart.Root data={data} innerRadius="40%" series={series} />
```

### Change Outer Radius

To change the outer radius, set `outerRadius` to a number or string. The default is `"90%"`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return <RadialChart.Root data={data} outerRadius="70%" series={series} />
```

### Change Corner Radius

To round sector corners, set `cornerRadius` to a number.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ cornerRadius: 9999, dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return <RadialChart.Root data={data} outerRadius="70%" series={series} />
```

### Change Gap

To change the gap between bars, set `barCategoryGap` to a number or string. The default is `"10%"`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return (
  <RadialChart.Root
    barCategoryGap="20%"
    data={data}
    outerRadius="70%"
    series={series}
  />
)
```

### Stacked

```tsx
const series = useMemo(
  () => [
    { color: "blue.500", dataKey: "desktop", nameKey: "browser" },
    { color: "blue.300", dataKey: "mobile", nameKey: "browser" },
  ],
  [],
)
const data = useMemo(
  () => [
    {
      browser: "chrome",
      desktop: faker.number.int({ max: 3000, min: 2000 }),
      mobile: faker.number.int({ max: 5000, min: 4000 }),
    },
  ],
  [],
)
const total = useMemo(
  () => data.reduce((acc, { desktop, mobile }) => acc + desktop + mobile, 0),
  [data],
)

return (
  <RadialChart.Root
    data={data}
    endAngle={180}
    innerRadius="70%"
    series={series}
    startAngle={0}
    tooltipProps={{
      formatter: (value, _, data) => [
        Number(value).toLocaleString(),
        toTitleCase(isString(data.dataKey) ? data.dataKey : ""),
      ],
    }}
  >
    <RadialChart.Label
      content={({ className, viewBox }) => {
        if (!viewBox) return null
        if (!("cx" in viewBox) || !("cy" in viewBox)) return null

        return (
          <text
            className={className}
            dominantBaseline="middle"
            textAnchor="middle"
            x={viewBox.cx}
            y={viewBox.cy}
          >
            <styled.tspan asChild fontSize="6xl" fontWeight="bold">
              <tspan x={viewBox.cx} y={viewBox.cy - 40}>
                {total.toLocaleString()}
              </tspan>
            </styled.tspan>

            <styled.tspan asChild color="fg.muted" fontSize="xl">
              <tspan x={viewBox.cx} y={viewBox.cy}>
                Visitors
              </tspan>
            </styled.tspan>
          </text>
        )
      }}
    />
  </RadialChart.Root>
)
```

### Sync

To sync charts, set `syncId` to a string.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return (
  <VStack>
    <RadialChart.Root data={data} series={series} syncId="chart" />
    <RadialChart.Root data={data} series={series} syncId="chart" />
  </VStack>
)
```

### Format

To format the chart, use `formatter`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(
  () => RadialChart.mergeData(createPolarChartData(), "blue"),
  [],
)

return (
  <RadialChart.Root
    data={data}
    radialProps={{
      label: {
        formatter: (value) => Number(value).toLocaleString(),
      },
      labelList: {
        formatter: (value) => (isString(value) ? toTitleCase(value) : value),
      },
    }}
    series={series}
    tooltipProps={{
      formatter: (value, name = "") => [
        Number(value).toLocaleString(),
        toTitleCase(name),
      ],
    }}
  />
)
```

### Hide Tooltip

To hide the tooltip, set `withTooltip` to `false`. The default is `true`.

```tsx
const series = useMemo<RadialChart.RadialProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])

return <RadialChart.Root data={data} series={series} withTooltip={false} />
```

## Props

<PropsTable
  name="chart"
  pick={[
    "RadialChart",
    "RadialChart.Root",
    "RadialChart.Radial",
    "RadialChart.AngleAxis",
    "RadialChart.Grid",
    "RadialChart.Label",
    "RadialChart.LabelList",
    "RadialChart.Legend",
    "RadialChart.RadiusAxis",
    "RadialChart.Tooltip",
  ]}
/>