1. Components
  2. Data Bars

Components

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

RangeBar

CategoryBar

40
70
90
100
0
100

   

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
  • RangeBar: Bar to show individual performance against peer performance
  • CategoryBar: Bar with categories and individual performance marker

Import Bar Components

Tremor exports five components within the Data Bar category.

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 percentageValue equals zero, the ProgressBar is not shown and only the background is visible.

ProgressBar

Anatomy ProgressBar

How the basic component is pieced together displaying all properties with their default values.

import { ProgressBar } from "@tremor/react";

export default () => (
  <ProgressBar
    percentageValue={}
    label=""
    tooltip=""
    showAnimation={true}
    color="blue"
    marginTop="mt-0"
  />
);

Usage example ProgressBar

Can be combined with several components, such as Flex and Text components.

ProgressBar with Text components

$ 9,012 • 45%

$ 20,000

import { Card, Flex, Text, ProgressBar } from "@tremor/react";

export default () => (
  <Card maxWidth="max-w-sm">
    <Flex>
      <Text>$ 9,012 &bull; 45%</Text>
      <Text>$ 20,000</Text>
    </Flex>
    <ProgressBar percentageValue={45} color="teal" marginTop="mt-2" />
  </Card>
);

API Reference: ProgressBar

percentageValue
Description
Sets the value of the progress indicator.
Type
number
Default
-
Values
0 to 100
labeloptional
Description
Sets a value displayed on right side of the bar.
Type
string
Default
-
Values
coloroptional
Description
Sets the color of the Bar and the bar background.
Type
string
Default
blue
Values
See color section
tooltipoptional
Description
Set a tooltip on hover.
Type
string
Default
-
Values
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
true
Values
true, false
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

MarkerBar

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

MarkerBar

Anatomy MarkerBar

How the basic component is pieced together displaying all properties with their default values.

import { MarkerBar } from "@tremor/react";

export default () => (
  <MarkerBar
    percentageValue={}
    color="blue" 
    tooltip="" 
    showAnimation={true}
    marginTop="mt-0" />
);

Usage example MarkerBar

The component can be combined with several components, such as Flex and Text components.

MarkerBar with Text components

$ 9,012 • 45%

$ 20,000

import { MarkerBar, Card, Flex, Text } from "@tremor/react";

export default () => (
  <Card maxWidth="max-w-sm">
    <Flex>
      <Text>$ 9,012 &bull; 45%</Text>
      <Text>$ 20,000</Text>
    </Flex>
    <MarkerBar percentageValue={45} color="fuchsia" marginTop="mt-4" />
  </Card>
);

API Reference: MarkerBar

percentageValue
Description
Sets the value of the progress indicator.
Type
number
Default
-
Values
0 to 100
coloroptional
Description
Sets color of the marker.
Type
string
Default
blue
Values
See color section
tooltipoptional
Description
Set a tooltip on hover.
Type
string
Default
-
Values
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
true
Values
true, false
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

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 percentageValue equals zero, the marker is not shown and only the background is visible.

DeltaBar with default increase behavior

DeltaBar with increase seen as negative

Anatomy DeltaBar

How the basic component is pieced together displaying all properties with their default values.

import { DeltaBar } from "@tremor/react";

export default () => (
  <DeltaBar
    percentageValue={}
    isIncreasePositive={true}
    tooltip=""
    showAnimation={true}
    marginTop="mt-0"
  />
);

Usage example DeltaBar

Can be combined with several components, such as Flex and Text components.

DeltaBar with positive increase seen as negative

Product A

+$9,000

(+45%)

import { DeltaBar, Card, Flex, Text } from "@tremor/react";

export default () => (
  <Card maxWidth="max-w-sm">
    <Flex>
      <Text>Product A</Text>
      <Text>+$9,000 (+45%)</Text>
    </Flex>
    <DeltaBar 
      percentageValue={45} 
      isIncreasePositive={true} 
      marginTop="mt-4" />
  </Card>
);

API Reference: DeltaBar

percentageValue
Description
Sets the value of the bar.
Type
number
Default
-
Values
0 to 100
isIncreasePositiveoptional
Description
To indicate whether positive change is positive or negative.
Type
boolean
Default
true
Values
true, false
tooltipoptional
Description
Set a tooltip on hover.
Type
string
Default
-
Values
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
true
Values
true, false
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

RangeBar

The RangeBar allows input from 0 to 100. If no data is available or percentageValue equals zero, the marker is not shown and only the background is visible. The same applies to peer group value, minPercentageValue and maxPercentageValue.

RangeBar

Anatomy RangeBar

How the basic component is pieced together displaying all properties with their default values.

import { RangeBar } from "@tremor/react";

export default () => (
    <RangeBar
        percentageValue={}
        minPercentageValue={}
        maxPercentageValue={}
        markerTootip=""
        rangeTooltip=""
        showAnimation={true}
        color="blue"
        marginTop="mt-0"
    />
);

Usage example RangeBar

Can be combined with several components, such as Flex and Text components.

RangeBar

+$9,000 (+45%)

Product A

import { RangeBar, Card, Flex, Text } from "@tremor/react";

export default () => (
  <Card maxWidth="max-w-sm">
    <Flex>
      <Flex>
        <Text>+$9,000 (+45%)</Text>
        <Text>Product A</Text>
      </Flex>
    </Flex>
    <RangeBar
      percentageValue={39}
      minPercentageValue={10}
      maxPercentageValue={30}
      markerTooltip="39%"
      rangeTooltip="10% - 30%"
      marginTop="mt-3"
      color="rose"
    />
  </Card>
);

API Reference: RangeBar

percentageValue
Description
Sets the value of the marker.
Type
number
Default
-
Values
0 to 100
minPercentageValueoptional
Description
The value that defines the start or minimum value of the peer value range.
Type
number
Default
-
Values
0
maxPercentageValueoptional
Description
The value that defines the end or maximum value of the peer value.
Type
number
Default
-
Values
markerTooltipoptional
Description
Sets a tooltip when hovering over the marker bar.
Type
string
Default
-
Values
rangeTooltipoptional
Description
Sets a tooltip when hovering over the range.
Type
string
Default
-
Values
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
true
Values
true, false
coloroptional
Description
Sets the color of the marker.
Type
string
Default
blue
Values
See color section
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

CategoryBar

The CategoryBar allows input from 0 to 100. If no data is available or percentageValue 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
90
100
0
100

Anatomy CategoryBar

How the basic component is pieced together displaying all properties with their default values.

import { CategoryBar } from "@tremor/react";

export default () => (
  <CategoryBar
    categoryPercentageValues={[]}
    colors={[]}
    percentageValue={}
    showLabels={true}
    tooltip=""
    showAnimation={true}
    marginTop="mt-0"
  />
);

Example usage CategoryBar

Can be combined with several components, such as Flex and Text components.

RangeBar

Rating Product A

62%

40
70
90
100
0
100
import { CategoryBar, Card, Flex, Text } from "@tremor/react";

export default () => (
  <Card maxWidth="max-w-sm">
    <Flex>
      <Text>Rating Product A</Text>
      <Text>62%</Text>
    </Flex>
    <CategoryBar
      categoryPercentageValues={[40, 30, 20, 10]}
      colors={["emerald", "yellow", "orange", "rose"]}
      percentageValue={62}
      marginTop="mt-3"
    />
  </Card>
);

API Reference: CategoryBar

categoryPercentageValues
Description
Define the percentage values of the bars. Ideally, they sum up to 100
Type
array
Default
-
Values
E.g. [40, 30, 20, 10]
percentageValueoptional
Description
Set the value of the marker.
Type
number
Default
-
Values
0 to 100
colorsoptional
Description
Set the corresponding category colors. They have to be in the same order as your categoryPercentageValues.
Type
array
Default
-
Values
E.g. ['emerald', 'yellow', 'orange', 'rose']
showLabelsoptional
Description
Display labels above the bars.
Type
boolean
Default
true
Values
true, false
tooltipoptional
Description
Set a tooltip on hover.
Type
string
Default
-
Values
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
true
Values
true, false
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0