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

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: string
  • icon?: React.JSXElementConstructor<any>;
  • href?: string
  • target?: string
  • color?: string
color
Color
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
Sets an animation to the chart when it is loaded.
onValueChange
(payload: Bar<T>) => void;
Handler that is called when the value changes.

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