Bar List

A Bar List is a horizontal bar chart with labels, ideal for comparing quantities and visualizing categorical data. In REAVIZ, the Bar List consists of horizontal bars that represent different categories, each labeled with its corresponding value.

Where to use:

Compare Quantities: Ideal for comparing different categories.
Show Rankings: Useful for displaying rankings or ordered lists.
Visualize Categorical Data: Great for data with distinct categories.

Quick Start

To create a Bar List, use import the BarList and give it data. The chart will automatically configure itself with the default options exposed via props.

import { BarList } from 'reaviz';


export default function App() {
  return (
    <BarList
      data={[
        { key: 'DLP', data: 13 },
        { key: 'Endpoint', data: 7 },
        { key: 'SIEM', data: 2 }
      ]}
    />
  );
}

import { BarList } from 'reaviz';

export default function App() {
  return (
    <BarList
      data={[
        { key: 'DLP', data: 13 },
        { key: 'Endpoint', data: 7 },
        { key: 'SIEM', data: 2 }
      ]}
    />
  );
}

DLP

Endpoint

SIEM

Examples

API

BarList (opens in a new tab)

Prop	Description	Default
`id`	ID for the chart. `string`
`className`	CSS Classname for the element. `string`
`style`	Style for the element. `CSSProperties`
`data`	Data for the chart. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`	`[]`
`sortDirection`	Sort direction of the data. `"asc" \| "desc" \| "none"`	`desc`
`series`	Series to render. `ReactElement<BarListSeriesProps, FC<BarListProps>>`	`<BarListSeries />`
`type`	Whether the values are percentages or absolute values. In the latter case, the chart would be relative `"percent" \| "count"`	`count`

BarListSeries (opens in a new tab)

Prop	Description	Default
`data`	Data for the chart. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`
`colorScheme`	Color scheme for the chart. `ColorSchemeType`	`cybertron`
`labelPosition`	The label position. `BarListLabelPosition`	`top`
`valuePosition`	The value position. `BarListLabelPosition`	`none`
`itemClassName`	The bar item class name. `string`
`labelClassName`	Label css class name. `string`
`valueClassName`	Label value class name. `string`
`barClassName`	Bar component class name. `string`
`outerBarClassName`	Bar container class name. `string`
`labelFormat`	Custom label format. `(data: ChartInternalDataTypes, index: number) => any`
`valueFormat`	Custom value format `(data: ChartInternalDataTypes, index: number) => any`
`onItemClick`	Item was clicked. `(data: ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>) => void`
`onItemMouseEnter`	Item had mouse enter. `(data: ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>) => void`
`onItemMouseLeave`	Item had mouse leave. `(data: ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>) => void`

Bar Chart Bubble Chart