Flowvis

Bar Chart
Copy component without data

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

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

Minimum call:

Horizontal bar chart is a standard bar chart with "orientation" prop set to "horizontal". 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={[]} orientation="horizontal" />
</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'}
orientationbar chart orientation, either "vertical" (default) or "horizontal"Novertical