reaviz BarList
Horizontal bar list for ranking data. Renders semantic HTML (not SVG) with animated bars, configurable label/value positions, sorting, and percentage mode.
Import
import { BarList, BarListSeries } from 'reaviz';
BarList Props
| Prop | Type | Default | Description |
|---|---|---|---|
data |
ChartShallowDataShape[] |
[] |
Chart data |
type |
'count' | 'percent' |
'count' |
Value scaling — count scales to max value, percent scales to 100 |
sortDirection |
'asc' | 'desc' | 'none' |
'desc' |
Sort bars by value |
series |
ReactElement<BarListSeriesProps> |
<BarListSeries /> |
Series component |
id |
string |
— | CSS ID |
className |
string |
— | CSS class |
style |
React.CSSProperties |
— | Inline styles |
BarListSeries Props
| Prop | Type | Default | Description |
|---|---|---|---|
colorScheme |
ColorSchemeType |
'cybertron' |
Color scheme name or function |
labelPosition |
BarListLabelPosition |
'top' |
Key label placement |
valuePosition |
BarListLabelPosition |
'none' |
Value label placement |
labelFormat |
(data, index) => any |
— | Custom label formatter |
valueFormat |
(data, index) => any |
— | Custom value formatter |
itemClassName |
string |
— | CSS class for each bar item |
labelClassName |
string |
— | CSS class for key labels |
valueClassName |
string |
— | CSS class for value labels |
barClassName |
string |
— | CSS class for the inner bar |
outerBarClassName |
string |
— | CSS class for the bar container |
onItemClick |
(data: ChartShallowDataShape) => void |
— | Click handler |
onItemMouseEnter |
(data: ChartShallowDataShape) => void |
— | Mouse enter handler |
onItemMouseLeave |
(data: ChartShallowDataShape) => void |
— | Mouse leave handler |
BarListLabelPosition: 'none' | 'top' | 'start' | 'end' | 'bottom'
Basic Usage
const data = [
{ key: 'Phishing', data: 10 },
{ key: 'Malware', data: 8 },
{ key: 'DDoS', data: 5 },
{ key: 'Ransomware', data: 3 },
];
<BarList data={data} />
With Values Displayed
<BarList
data={data}
series={<BarListSeries valuePosition="end" />}
/>
Percentage Mode
<BarList
data={data}
type="percent"
series={
<BarListSeries
valuePosition="end"
valueFormat={(data) => `${data}%`}
/>
}
/>
Sort Direction
// Ascending (smallest first)
<BarList data={data} sortDirection="asc" />
// Descending (largest first, default)
<BarList data={data} sortDirection="desc" />
// Original data order
<BarList data={data} sortDirection="none" />
Label Positions
// Label above bar (default)
<BarListSeries labelPosition="top" />
// Label at start of bar
<BarListSeries labelPosition="start" />
// Label at end of bar
<BarListSeries labelPosition="end" />
// Label below bar
<BarListSeries labelPosition="bottom" />
// No label
<BarListSeries labelPosition="none" />
Click Handling
<BarList
data={data}
series={
<BarListSeries
valuePosition="end"
=> console.log(item)}
/>
}
/>
Custom Styling
<BarList
data={data}
series={
<BarListSeries
barClassName="rounded-full"
outerBarClassName="bg-gray-100 rounded-full"
valueClassName="text-sm font-mono"
/>
}
/>
Notes
- Renders semantic HTML (
role="list"/role="listitem"), not SVG - Bars animate with staggered entrance using Framer Motion
- Data is normalized to a 0-100% width range using D3 linear scale
- Each item carries metadata with original
valueand calculatedpercent