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

BarListSeries Props

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"
      onItemClick={(item) => 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 value and calculated percent