Visualizations

Bar List

Horizontal bars with a customizable label inside.

/home

/imprint

/cancellation

456

351

51

Import BarList

Tremor exports one component to create an the bar lsit.

import { BarList } from '@tremor/react';

Usage example

You can also pass an href into the data, then your datapoint gets rendered as a clickable link with target="_blank" and rel="noreferrer".

Website Analytics

SourceViews

Usage with ascending sortOrder

Pass sortOrder="ascending" to change the sort order.

ascending

JBL

Sony

Bose

4

31

46

descending

Bose

Sony

JBL

46

31

4

none

Bose

JBL

Sony

46

4

31

API Reference: BarList

client component
data
Required
Bar<T>[]

Array of objects, with each object containing a value (number), name (string). Here are the detailed types for Bar<T> = T &

  • key?: string
  • value: number
  • name: React.ReactNode
  • icon?: React.JSXElementConstructor<any>;
  • href?: string
  • target?: string
  • color?: string
color
Color

Default: blue

Sets color of the marker.
valueFormatter
ValueFormatter
Controls the text formatting for the y-axis values. When using Typescript, import the ValueFormatter type provided by Tremor.
showAnimation
boolean

Default: true

Sets an animation to the chart when it is loaded.
onValueChange
(payload: Bar<T>) => void;
Handler that is called when the value changes.
sortOrder
"ascending" | "descending" | "none"

Default: "descending"

Change the sort order.

Theming

BarList

Roundness
borderRadiustremor-small
Font size
fontSizetremor-default
Bar color
colorstremor-brand-muted
Icon color
colorstremor-content-default
Text color href
colorstremor-content-emphasis
Text color labels
colorstremor-content-emphasis