Flowvis

Bar Chart
Copy component without data

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

import {BarChart} 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">
 <BarChart 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[]
coloran object property which controls the bar chart coloring: {idx: number between 0 - 45, type:"fixed" | "colorful"}No{idx:0, type: 'fixed'}