BarChart
Labelled bars, horizontal or vertical.
import { BarChart } from '@textui/widgets';
<BarChart
data={[
{ label: 'api', value: 42 },
{ label: 'worker', value: 17, tone: 'warning' },
]}
/>
Props
| Prop | Type | Default | |
| — | — | — | — |
| data | { label: string; value: number; tone?: 'default' \| 'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'muted' }[] | required | |
| max | number | | |
| barWidth | number | 20 | Cells the bars occupy, not counting labels. Horizontal only - see below. |
| showValue | boolean | true | |
| format | (value: number) => string | | |
| orientation | 'horizontal' \| 'vertical' | 'horizontal' | |
| columnWidth | number | | How many cells across each bar is, standing up. Vertical only, and one by default - which is what it always was, and is a hairline rather than a bar. Two or three read as bars, and the label under each one grows to match, so columnWidth: 2 gets two letters instead of an initial. The two axes are named separately on purpose. barWidth is how far a horizontal bar runs, which is the value axis; this is the thickness of a vertical one, which is the category axis. Lying flat they swap over, and a single prop meaning both would mean neither. |
| chartHeight | number | 8 | Rows tall, standing up. Vertical only. |
Plus everything on BoxProps.
Horizontal by default, which is the right way round in a terminal: labels read left to right and a vertical bar chart has nowhere to put them.
Per-bar tone marks one out. max fixes the scale so two charts can be compared - without it each scales to its own largest value and the taller bar means nothing.