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

import { PercentageBarChart } from 'chartformers';
import 'chartformers/dist/chartformers.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)

The 'keys' which will determines the layers are all the properties of the first member of the data other than the 'label' property. Each member after the first member can has from one to all keys as properties.
Sample Data

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

For this example, the 'keys' are ['apple', 'orange', 'mango']. Under the hood the data will be formatted into:

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

Incorrect Data Format

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

Incorrect because Greg has grapes which Jeremy - the first member - does not have. To fix this, change into:

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

Now, after formatted under the hood, all the members will have the same layers of data.

#Property Table