Flowvis

Pie/Donut Chart
Copy component without data

To use the pie/donut chart, import these on top:

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

Minimum call:

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={[]} />
</div>

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

  • label: string
  • value: number

#Property Table

propertydescriptionmandatorydefault value
dataArray of objects with 2 properties: label and value. eg:[{label:"apple", value: 200}, {label:"orange", value: 270}]Yes[]
colorIdxan integer between 0 - 45 which determines the coloring of the pie slicesNo0
innerRadiusDetermines the radius for donut 'hole'. Preferably between 0 to 0.8No0
sortWithLegendsBoolean value which when sets to true, will also sort the pie legends when the 'Sort' checkbox is checkedNofalse