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.

Get component as a copy & paste version.

Storybook GitHub

ProgressBar

MarkerBar

DeltaBar

CategoryBar

100

import {  Card,  CategoryBar,  DeltaBar,  MarkerBar,  ProgressBar,} from '@tremor/react';
export const BarHero = () => (  <div className="mx-auto grid grid-cols-1 gap-12">    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        ProgressBar      </p>      <div className="flex justify-center">        <Card className="max-w-sm">          <ProgressBar value={72} />        </Card>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">MarkerBar</p>      <div className="flex justify-center">        <Card className="max-w-sm">          <MarkerBar value={62} />        </Card>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">DeltaBar</p>      <div className="flex justify-center">        <Card className="max-w-sm">          <DeltaBar value={50} isIncreasePositive={true} />        </Card>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        CategoryBar      </p>      <div className="flex justify-center">        <Card className="max-w-sm">          <CategoryBar            values={[40, 30, 20, 10]}            colors={['emerald', 'yellow', 'orange', 'rose']}            markerValue={62}          />        </Card>      </div>    </div>  </div>);

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';

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

The example shows a ProgressBar with text elements.

$9,012 • 45%$20,000

import { Card, ProgressBar } from '@tremor/react';
export function ProgressBarUsageExample() {  return (    <>      <Card className="mx-auto max-w-sm">        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content flex items-center justify-between">          <span>$9,012 &bull; 45%</span>          <span>$20,000</span>        </p>        <ProgressBar value={45} color="teal" className="mt-3" />      </Card>    </>  );}

client component

value: Sets the value of the progress indicator.

label: Sets a value displayed on right side of the bar.

color: Sets the color of the Bar and the bar background.

tooltip: Set a tooltip on hover.

showAnimation: Sets an animation to the chart when it is loaded.

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

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

The example shows a MarkerBar with text elements.

$9,012 • 45%$20,000

import { Card, MarkerBar } from '@tremor/react';
export function MarkerBarUsageExample() {  return (    <>      <Card className="mx-auto max-w-sm">        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content flex items-center justify-between">          <span>$9,012 &bull; 45%</span>          <span>$20,000</span>        </p>        <MarkerBar value={45} color="fuchsia" className="mt-3" />      </Card>    </>  );}

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

$9,012 • 45%$20,000

import { Card, MarkerBar } from '@tremor/react';
export function MarkerBarRangeUsageExample() {  return (    <>      <Card className="mx-auto max-w-sm">        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content flex items-center justify-between">          <span>$9,012 &bull; 45%</span>          <span>$20,000</span>        </p>        <MarkerBar          value={45}          minValue={25}          maxValue={65}          color="blue"          className="mt-3"        />      </Card>    </>  );}

client component

value: Sets the value of the marker.

minValue: The value that defines the start or minimum value of the peer value range.

maxValue: The value that defines the end or maximum value of the peer value.

markerTooltip: Sets a tooltip when hovering over the marker bar.

rangeTooltip: Sets a tooltip when hovering over the range.

showAnimation: Sets an animation to the chart when it is loaded.

color: Sets color of the marker.

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

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

The example shows a DeltaBar with text elements.

DeltaBar with positive increase seen as negative

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

import { Card, DeltaBar } from '@tremor/react';
export const DeltaBarDoc = () => (  <div className="space-y-3">    <p className="text-center font-mono text-sm text-slate-500">      DeltaBar with positive increase seen as negative    </p>    <Card className="mx-auto max-w-sm">      <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content flex items-center justify-between">        <span>Product A</span>        <span className="flex items-center space-x-1">          <span>+$9,000</span>          <span>(+45%)</span>        </span>      </p>      <DeltaBar value={45} isIncreasePositive={false} className="mt-3" />    </Card>  </div>);

client component

value: Sets the value of the bar.

isIncreasePositive: To indicate whether positive change is positive or negative.

tooltip: Set a tooltip on hover.

showAnimation: Sets an animation to the chart when it is loaded.

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

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

100

The example shows a CategoryBar with text elements.

Rating Product A62%

100

import { Card, CategoryBar } from '@tremor/react';
export function CategoryBarUsageExample() {  return (    <>      <Card className="mx-auto max-w-sm">        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content flex items-center justify-between">          <span>Rating Product A</span>          <span>62%</span>        </p>        <CategoryBar          values={[40, 30, 20, 10]}          colors={['emerald', 'yellow', 'orange', 'rose']}          markerValue={62}          className="mt-3"        />      </Card>    </>  );}

client component

values: Define the percentage values of the bars. Ideally, they sum up to 100

markerValue: Set the value of the marker.

colors: Change the default colors. When using Typescript, import the Color type provided by Tremor.

showLabels: Display labels above the bars.

tooltip: Set a tooltip on hover.

showAnimation: Sets an animation to the chart when it is loaded.

Element	Theme Token
Roundness borderRadiustremor-full	borderRadiustremor-full