To use the percentage bar chart, import these on top:

import {PercentageBarChart} 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">
 <PercentageBarChart data={[]} />
</div>

The component requires a mandatory data property. This data is an array of object which:

• has a "label" property which value is a string
• has key(string)-value(number) pair as property(es)

Sample Data

const kidsFruits = [
    {
        label: "Jeremy", apple: 3, orange: 7, mango: 4
    },
    {
        label: "Greg", apple: 6, orange: 3, mango: 4
    }
]

Incorrect Data Format

const kidsFruits = [
    {
        label: "Jeremy", apple: 3, orange: 7, mango: 4
    },
    {
        label: "Greg", apple: 6, orange: 3, mango: 4, grapes:3
    }
]

Incorrect because Greg has grapes and Jeremy does not. To fix this, change into:

const kidsFruits = [
    {
        label: "Jeremy", apple: 3, orange: 7, mango: 4, grapes:0
    },
    {
        label: "Greg", apple: 6, orange: 3, mango: 4, grapes:3
    }
]

Now all the members has the same layers of data.

#Property Table