DonutChart

DonutChart is a component for drawing donut charts to compare multiple sets of data.

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

const series = useMemo<DonutChart.DonutProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo<Data[]>(
  () =>
    DonutChart.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 <DonutChart.Root data={data} series={series} />

Usage

import { DonutChart } from "@yamada-ui/react"

import { DonutChart } from "@/components/ui"

import { DonutChart } from "@workspaces/ui"

<DonutChart.Root>
  <DonutChart.Donut>
    <DonutChart.LabelList />
  </DonutChart.Donut>
  <DonutChart.Label />
  <DonutChart.Tooltip />
  <DonutChart.Legend />
</DonutChart.Root>

Composition

const data = useMemo<Data[]>(
  () =>
    createPolarChartData().map((item, index) => ({
      ...item,
      fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
    })),
  [],
)

return (
  <DonutChart.Root>
    <DonutChart.Donut data={data} dataKey="visits" nameKey="browser">
      <DonutChart.LabelList color="white" dataKey="browser" />
      <Text as="span">Donut Chart</Text>
    </DonutChart.Donut>
    <DonutChart.Tooltip />
    <DonutChart.Legend />
  </DonutChart.Root>
)

Change Size

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

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

Change Color

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

return <DonutChart.Root data={data} series={series} />

Change Sector Colors

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

return <DonutChart.Root data={data} series={series} />

Hide Sector Stroke

To hide sector stroke lines, set sectorStroke to "none".

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

return <DonutChart.Root data={data} sectorStroke="none" series={series} />

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

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

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

Display Multiple Donuts

To display multiple donuts in one chart, set multiple entries in series.

const series = useMemo<DonutChart.DonutProps<Data>[]>(
  () => [
    {
      dataKey: "visits",
      innerRadius: "80%",
      nameKey: "browser",
    },
    {
      dataKey: "downloads",
      nameKey: "browser",
      innerRadius: "50%",
      outerRadius: "70%",
    },
  ],
  [],
)
const data = useMemo<Data[]>(
  () => DonutChart.mergeData(createPolarChartData()),
  [],
)

return <DonutChart.Root data={data} series={series} />

Add Label

To display labels, set label of series or donutProps.label to true. The default is false.

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

return (
  <DonutChart.Root data={data} donutProps={{ label: true }} series={series} />
)

Add Label Line

To display label lines, set labelLine of series or donutProps.labelLine to true. The default is false.

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

return (
  <DonutChart.Root
    data={data}
    donutProps={{ label: true, labelLine: true }}
    series={series}
  />
)

Change Label Offset

To change the label offset, set label.offset of series or donutProps.label.offset to a number. The default is 0.

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

return (
  <DonutChart.Root
    data={data}
    donutProps={{ label: { offset: 12 } }}
    series={series}
  />
)

Add Label List

To display values with label list, set labelList to true of series or donutProps.labelList. The default is false.

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

return (
  <DonutChart.Root
    data={data}
    donutProps={{ labelList: { color: "white" } }}
    series={series}
  />
)

Center Label

const series = useMemo<DonutChart.DonutProps<Data>[]>(
  () => [{ dataKey: "visits", nameKey: "browser" }],
  [],
)
const data = useMemo<Data[]>(
  () => DonutChart.mergeData(createPolarChartData()),
  [],
)
const total = useMemo(
  () => data.reduce((acc, { visits }) => acc + visits, 0),
  [data],
)

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

    <DonutChart.Root data={data}>
      <DonutChart.Donut dataKey="visits" nameKey="browser">
        <DonutChart.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>
            )
          }}
        />
      </DonutChart.Donut>
    </DonutChart.Root>
  </VStack>
)

Change Padding Angle

To change the padding angle, set paddingAngle of series or donutProps.paddingAngle to a number. The default is 0.

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

return (
  <DonutChart.Root
    data={data}
    donutProps={{ paddingAngle: 15 }}
    series={series}
  />
)

Change Start Angle

To change the start angle, set startAngle of series or donutProps.startAngle to a number. The default is 90.

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

return (
  <DonutChart.Root data={data} donutProps={{ startAngle: 0 }} series={series} />
)

Change End Angle

To change the end angle, set endAngle of series or donutProps.endAngle to a number. The default is -270.

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

return (
  <DonutChart.Root
    data={data}
    donutProps={{ endAngle: -180 }}
    series={series}
  />
)

Change Inner Radius

To change the inner radius, set innerRadius of series or donutProps.innerRadius to a number or string. The default is "70%".

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

return (
  <DonutChart.Root
    data={data}
    donutProps={{ innerRadius: "50%" }}
    series={series}
  />
)

Change Outer Radius

To change the outer radius, set outerRadius of series or donutProps.outerRadius to a number or string. The default is "100%".

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

return (
  <DonutChart.Root
    data={data}
    donutProps={{ outerRadius: "80%" }}
    series={series}
  />
)

Sync

To sync charts, set syncId to a string.

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

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

Format

To format values and labels, use formatter.

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

return (
  <DonutChart.Root
    data={data}
    series={series}
    donutProps={{
      label: {
        formatter: (_, percent) => `${(percent * 100).toFixed(0)}%`,
      },
      labelLine: true,
      labelList: {
        color: "white",
        formatter: (value) => (isString(value) ? toTitleCase(value) : value),
      },
    }}
    tooltipProps={{
      formatter: (value, name = "") => [
        Number(value).toLocaleString(),
        toTitleCase(name),
      ],
    }}
  />
)

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

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

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

Props

DonutChart.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`activeDotFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the active dot.
`activeDotRadius`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| 0 ...` The radius of the active dot.
`activeDotStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the active dot.
`activeDotStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the active dot stroke.
`angleAxisLineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the angle axis line.
`angleAxisLineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the angle axis line stroke.
`angleAxisProps`	-	`UseAngleAxisProps` Props for the angle axis component.
`angleAxisTextColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the angle axis text.
`angleAxisTextFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the angle axis text.
`chartProps`	-	`Omit<PolarChartProps, "data">` Props for the polar chart component.
`data`	-	`Y[]` Chart data.
`donutProps`	-	`Omit<ChartPieProps<Dict<any>>, "data" \| "dataKey" \| "nameKey">` Props for the donut component.
`dotFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the dot.
`dotRadius`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| 0 ...` The radius of the dot.
`dotStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the dot.
`dotStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the dot stroke.
`gridProps`	-	`ChartPolarGridProps` Props for the grid component.
`gridStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the grid.
`inactiveLabelLineOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The opacity of the inactive label line.
`inactiveLabelOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The opacity of the inactive label.
`inactiveRadarOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The opacity of the inactive radar.
`inactiveSectorOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The opacity of the inactive sector.
`labelColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the label.
`labelFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the label.
`labelLineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the label line.
`labelLineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the label line stroke.
`labelListColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the label list.
`labelListFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the label list.
`legendProps`	-	`ChartLegendProps` Props for the legend component.
`pieProps`	-	`Omit<ChartPieProps<Dict<any>>, "data" \| "dataKey" \| "nameKey">` Props for the pie component.
`radarColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the radar.
`radarFillOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The fill opacity of the radar.
`radarProps`	-	`Omit<ChartRadarProps<Dict<any>>, "data" \| "dataKey">` Props for the radar component.
`radarStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the radar.
`radarStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the radar stroke.
`radialBackgroundColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the radial background.
`radialBackgroundFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the radial background.
`radialBackgroundStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the radial background.
`radialBackgroundStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the radial background stroke.
`radialProps`	-	`Omit<ChartRadialProps<Dict<any>>, "dataKey" \| "nameKey">` Props for the radial component.
`radiusAxisLineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the radius axis line.
`radiusAxisLineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the radius axis line stroke.
`radiusAxisProps`	-	`UseRadiusAxisProps` Props for the radius axis component.
`radiusAxisTextColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the radius axis text.
`radiusAxisTextFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the radius axis text.
`responsiveContainerProps`	-	`Props` Props for the responsive container component.
`sectorColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the sector.
`sectorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the sector.
`sectorProps`	-	`ChartSectorProps` Props for the sector component.
`sectorStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the sector.
`sectorStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the sector stroke.
`series`	-	`ChartDonutProps<Y>[]` - If provided, generate lines based on series.
`tooltipCursorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the tooltip cursor.
`tooltipCursorFillOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The fill opacity of the tooltip cursor.
`tooltipCursorStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the tooltip cursor.
`tooltipProps`	-	`ChartTooltipProps<number, string>` Props for the tooltip component.
`withAngleAxis`	`true`	`boolean` If `true`, angle axis is visible.
`withGrid`	`true`	`boolean` If `true`, grid is visible.
`withLegend`	`false`	`boolean` If `true`, legend is visible.
`withRadiusAxis`	`false`	`boolean` If `true`, radius axis is visible.
`withTooltip`	`true`	`boolean` If `true`, tooltip is visible.

DonutChart.Donut

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`dataKey`	-	`Exclude<keyof Y, "fill">` The key of a group of data which should be unique in an chart.
`nameKey`	-	`Exclude<keyof Y, "fill">` The key of the name of the data.
`activeIndex`	-	`number` The active index of the sector.
`data`	-	`Y[]` The data to use for the pie.
`label`	-	`ChartPieLabel` The label to use for the pie.
`labelLine`	`false`	`ChartPieLabelLine` The label line to use for the pie.
`labelList`	`false`	`ChartPieLabelList` If `true`, the label list is visible.
`sectorProps`	-	`((props: PieSectorShapeProps, index: number) => ChartSectorProps) \| ChartSectorProps` Props for the sector component.

DonutChart.Label

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

DonutChart.LabelList

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

DonutChart.Legend

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`contentProps`	-	`Omit<ChartLegendContentProps, "formatter" \| "payload">` Props for the content component.
`placement`	`"start-end"`	`Direction` The placement of the legend.

DonutChart.Tooltip

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`contentProps`	-	`Omit<ChartTooltipContentProps, "formatter" \| "label" \| "labelFormatter" \| "payload">` Props for the content component.
`cursor`	-	`boolean \| ChartTooltipCursorProps \| ReactElement` Props for the cursor component.

DonutChart

Usage

Composition

Change Size

Change Color

Change Sector Colors

Hide Sector Stroke

Add Legend

Display Multiple Donuts

Add Label

Add Label Line

Change Label Offset

Add Label List

Center Label

Change Padding Angle

Change Start Angle

Change End Angle

Change Inner Radius

Change Outer Radius

Sync

Format

Hide Tooltip

Props

DonutChart.Root

DonutChart.Donut

DonutChart.Label

DonutChart.LabelList

DonutChart.Legend

DonutChart.Tooltip

DonutChart.Root

DonutChart.Donut

DonutChart.Label

DonutChart.LabelList

DonutChart.Legend

DonutChart.Tooltip