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
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>);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
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 • 45%</span> <span>$20,000</span> </p> <ProgressBar value={45} color="teal" className="mt-3" /> </Card> </> );}API Reference: ProgressBar
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.
Default: blue
- tooltip
- Set a tooltip on hover.
- showAnimation
- Sets an animation to the chart when it is loaded.
Default: true
Theming
ProgressBar
| 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 |
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
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 • 45%</span> <span>$20,000</span> </p> <MarkerBar value={45} color="fuchsia" className="mt-3" /> </Card> </> );}Usage example MarkerBar with Range
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 • 45%</span> <span>$20,000</span> </p> <MarkerBar value={45} minValue={25} maxValue={65} color="blue" className="mt-3" /> </Card> </> );}API Reference: MarkerBar
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.
Default: true
- color
- Sets color of the marker.
Default: blue
Theming
MarkerBar
| 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 |
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%)
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>);API Reference: DeltaBar
client component- value
- Sets the value of the bar.
- isIncreasePositive
- To indicate whether positive change is positive or negative.
Default: true
- tooltip
- Set a tooltip on hover.
- showAnimation
- Sets an animation to the chart when it is loaded.
Default: true
Theming
DeltaBar
| 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 |
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
Example usage CategoryBar
The example shows a CategoryBar with text elements.
Rating Product A62%
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> </> );}API Reference: CategoryBar
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.
Default: true
- tooltip
- Set a tooltip on hover.
- showAnimation
- Sets an animation to the chart when it is loaded.
Default: true
Theming
CategoryBar
| Element | Theme Token |
|---|---|
| Roundness borderRadiustremor-full | borderRadiustremor-full |