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
Tremor exports five components for progress and score bars:
ProgressBar
: Standard progress barMarkerBar
: Bar with marker points to show negative or positive deviation from a particular thresholdDeltaBar
: Bar to show negative or positive deviation from a particular thresholdRangeBar
: Bar to show individual performance against peer performanceCategoryBar
: 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 • 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
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 • 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
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
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
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
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%
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