Donut Chart

A circular chart with a hole in the center that shows the proportional composition of a dataset.

Storybook

Recharts Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

npm install radix-ui

components/donut-chart/donut-chart.tsx

import { type DonutChartStyles, donutChartStyles } from './donut-chart.css'
 
const DonutChart = () => {
  return null
}
 
export { DonutChart }

import {} from '#/components/donut-chart'

Browse the Storybook for more examples.

// WIP