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.

   

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.

Usage example ProgressBar

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

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

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

API Reference: ProgressBar

client component

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.

Usage example MarkerBar

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

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

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

API Reference: MarkerBar

client component

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.

Usage example DeltaBar

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

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

export default () => (
  <Card className="max-w-sm">
    <Flex>
      <Text>Product A</Text>
      <Flex alignItems="baseline" justifyContent="end" className="space-x-1">
        <Text>+$9,000</Text>
        <Text>(+45%)</Text>
      </Flex>
    </Flex>
    <DeltaBar
      percentageValue={45}
      isIncreasePositive={false}
      className="mt-3"
    />
  </Card>
);

API Reference: DeltaBar

client component

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.

Usage example RangeBar

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

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

export default () => (
  <Card className="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%"
      className="mt-3"
      color="rose"
    />
  </Card>
);

API Reference: RangeBar

client component

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.

Example usage CategoryBar

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

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

export default () => (
  <Card className="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}
      className="mt-3"
    />
  </Card>
);

API Reference: CategoryBar

client component