Visualizations

Data Bars

Components to indicate progress, performance, or status. For example, an individual score compared to a benchmark, the length of a process, or the deviation of a value.

ProgressBar

MarkerBar

DeltaBar

CategoryBar

40
70
0
100

Import Bar Components

Tremor exports five components for progress and score bars:

  • ProgressBar: Standard progress bar
  • MarkerBar: Bar with marker points to show negative or positive deviation from a particular threshold
  • DeltaBar: Bar to show negative or positive deviation from a particular threshold
  • CategoryBar: Bar with categories and individual performance marker
import {  ProgressBar,  MarkerBar,  DeltaBar,  RangeBar,  CategoryBar,} from '@tremor/react';

ProgressBar

The background color of the ProgressBar automatically adjusts to the selected color of the color. ProgressBar allows input from 0 to 100 where 100 means 100 percent. If no data is available or value equals zero, the ProgressBar is not shown and only the background bar is visible

ProgressBar

Usage example ProgressBar

The example shows a ProgressBar with text elements.

$9,012 • 45%$20,000

API Reference: ProgressBar

client component
value
Required
number
Sets the value of the progress indicator.
label
string
Sets a value displayed on right side of the bar.
color
Color

Default: blue

Sets the color of the Bar and the bar background.
tooltip
string
Set a tooltip on hover.
showAnimation
boolean

Default: true

Sets an animation to the chart when it is loaded.

Theming

ProgressBar

Roundness
borderRadiustremor-full
Background color
colorstremor-brand-faint
Progress color
colorstremor-brand-DEFAULT
Label color
colorstremor-content-emphasis
Font size
fontSizetremor-default

MarkerBar

The MarkerBar allows input from 0 to 100. If no data is available or markerValue equals zero, the marker is not shown and only the background is visible.

MarkerBar

Usage example MarkerBar

The example shows a MarkerBar with text elements.

$9,012 • 45%$20,000

Usage example MarkerBar with Range

The MarkerBar also can display a range, when minValue and maxValue props are set.

$9,012 • 45%$20,000

API Reference: MarkerBar

client component
value
Required
number
Sets the value of the marker.
minValue
number
The value that defines the start or minimum value of the peer value range.
maxValue
number
The value that defines the end or maximum value of the peer value.
markerTooltip
string
Sets a tooltip when hovering over the marker bar.
rangeTooltip
string
Sets a tooltip when hovering over the range.
showAnimation
boolean

Default: true

Sets an animation to the chart when it is loaded.
color
Color

Default: blue

Sets color of the marker.

Theming

MarkerBar

Roundness
borderRadiustremor-full
Background color
colorstremor-background-subtle
Range color
colorstremor-content-subtle
Label color
colorstremor-content-emphasis
Marker color
colorstremor-brand-DEFAULT
Marker ring color
colorstremor-brand-inverted

DeltaBar

Delta bar allows input from 100% to 100, where 100 equals 100 percent. isIncreasePositive can be used to declare positive change as negative and vice versa, meaning that the bar will be colored red if positive change is seen as negative. If no data is available or value equals zero, the marker is not shown and only the background is visible.

DeltaBar with default increase behavior

DeltaBar with increase seen as negative

Usage example DeltaBar

The example shows a DeltaBar with text elements.

DeltaBar with positive increase seen as negative

Product A+$9,000(+45%)

API Reference: DeltaBar

client component
value
Required
number
Sets the value of the bar.
isIncreasePositive
boolean

Default: true

To indicate whether positive change is positive or negative.
tooltip
string
Set a tooltip on hover.
showAnimation
boolean

Default: true

Sets an animation to the chart when it is loaded.

Theming

DeltaBar

Roundness
borderRadiustremor-full
Background color
colorstremor-background-subtle
Center marker color
colorstremor-background-emphasis
Center marker ring color
colorstremor-brand-inverted

CategoryBar

The CategoryBar allows input from 0 to 100. If no data is available or markerValue equals zero, the marker is not shown and only the bar categories are visible. The marker's color is automatically adjusted to the color of the category in which the marker is located.

CategoryBar with four categories

40
70
0
100

Example usage CategoryBar

The example shows a CategoryBar with text elements.

Rating Product A62%

40
70
0
100

API Reference: CategoryBar

client component
values
Required
array
Define the percentage values of the bars. Ideally, they sum up to 100
markerValue
number
Set the value of the marker.
colors
Color[]
Change the default colors. When using Typescript, import the Color type provided by Tremor.
showLabels
boolean

Default: true

Display labels above the bars.
tooltip
string
Set a tooltip on hover.
showAnimation
boolean

Default: true

Sets an animation to the chart when it is loaded.

Theming

CategoryBar

Roundness
borderRadiustremor-full