BarsList

A ranked list where each row is a bar sized by its value. Use it for top pages, top sources and any list where the size of each item matters at a glance.

General

Each item has a name and a value. The largest value fills the row, the others are sized against it.

Column labels

Add headers with barsLabel and valueLabel.

Colors and format

Set color on an item to override the type, and valueFormatter to change how the value reads.

APIs

BarsList.Props

Attribute	Description	Type	Accepted values	Default
data	the rows to show	`BarsListItem[]`	BarsListItem	-
type	theme color of the bars	`NormalTypes`	`'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info'`	`primary`
barColor	any CSS color for the bars, replaces `type`	`string`	-	-
valueFormatter	how a value is written	`(value: number) => string`	-	thousands separators, en-US
barsLabel	header above the bars	`string`	-	-
valueLabel	header above the values	`string`	-	-
...	native props, passed to the root	`HTMLAttributes`	`'id', 'className', ...`	-

BarsListItem

type BarsListItem = {
  name: string
  value: number // negative values draw no bar
  color?: string // any CSS color, replaces the type for this row
}

Ref

The ref points at the root div.

Accessibility

The rows are a list, and each item reads as its name followed by its value. The column headers are only visual, because the names and values already carry the meaning.

Edit this page on GitHub