To use the donut chart, import these on top:

import { PieChart } from 'flowvis';
import 'flowvis/dist/flowvis.css';

Minimum call:

Donut chart is a pie chart with a hollow at the center. To render donut instead of pie chart set the innerRadius prop to a number above 0 and below 0.8. The chart must be called in a container with width and height set. It will then fill the available space of this container.

<div className="w-full h-60 md:h-96">
 <PieChart data={[]} innerRadius={3.5} />
</div>

The component requires a mandatory data property. This data is an array of objects with two properties:

• label: string
• value: number

#Property Table