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.

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.

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

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.

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.

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

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.

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.

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

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.

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.

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

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.

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.

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