To use the horizontal bar chart, import these on top:
import { BarChart } from 'chartformers';
import 'chartformers/dist/chartformers.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
| property | description | mandatory | default value |
|---|---|---|---|
| data | Array of objects with 2 properties: label and value. eg:[{label:"apple", value: 200}, {label:"orange", value: 270}] | Yes | [] |
| color | an object property which controls the bar chart coloring: {idx: number between 0 - 45, type:"fixed" | "colorful"} | No | {idx:0, type: 'fixed'} |
| orientation | bar chart orientation, either "vertical" (default) or "horizontal" | No | vertical |
| tooltipFormat | see below | No | {} |
About tooltipFormat prop
For most chart types you can pass the optional tooltipFormat prop. This prop has 3 properties: formatType, prefix and suffix, all are optional.
| formatType | prefix | suffix |
|---|---|---|
| either 'long' or 'short', default is 'long'. If given a number value of 1500, 'long' will format the value into '1,500', while 'short' will format into '1,5k'. Optional property. | prefix for the given number value, optional property. eg: 'US$' | suffix for the given number value, optional property. eg: 'KWh' |
Example use:
if given number value of 1500:
<BarChart data={[...]} tooltipFormat={{ prefix:"US$ " }} />
with default 'formatType' as 'long', will render 'US$ 1,500' at the tooltip component.
Hint: In this example the US$ prefix has a single space at the end. If you want to put space between prefix and the value, do so by manually typing the space at the end of the prefix.
<BarChart data={[...]} tooltipFormat={{ formatType: "short", suffix:" KWh" }} />
with the 'formatType' as 'short', will render '1,5k KWh' at the tooltip component.
Hint: In this example the KWh suffix has a single space at the start. If you want to put space between suffix and the value, do so by manually typing the space at the start of the suffix.