1. Components
  2. Bar List

Components

BarList

Horizontal bars with a customizable label inside.

/home

/imprint

/cancellation

456

351

51

Anatomy BarList

How the basic component is pieced together displaying all properties with their default values. You can also pass an href into the data, then your datapoint gets rendered as a clickable link with target="_blank" and rel="noreferrer".

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

export default () => (
  <BarList 
    data={[]}
    valueFormatter=""
    color="blue" 
    showAnimation={true}
    marginTop="mt-0"/>
);

Usage example BarList

The component can be combined with several components, such as a Card and Title component.

Website Analytics

Source

Visits

import GithubFillIcon from 'remixicon-react/GithubFillIcon';
import YoutubeFillIcon from 'remixicon-react/YoutubeFillIcon';
import GoogleFillIcon from 'remixicon-react/GoogleFillIcon';
import RedditFillIcon from 'remixicon-react/RedditFillIcon';
import TwitterFillIcon from 'remixicon-react/TwitterFillIcon';


import {
    BarList,
    Card,
    Title,
    Bold,
    Flex,
    Text,
} from '@tremor/react';

const data = [
    { name: 'Twitter', value: 456, icon: TwitterFillIcon, href: 'https://twitter.com/tremorlabs'},
    { name: 'Google', value: 351, icon: GoogleFillIcon, href: 'https://google.com'},
    { name: 'GitHub', value: 271, icon: GithubFillIcon, href: 'https://github.com/tremorlabs/tremor'},
    { name: 'Reddit', value: 191, icon: RedditFillIcon, href: 'https://reddit.com' },
    { name: 'Youtube', value: 91, icon: YoutubeFillIcon, href: 'https://www.youtube.com/@tremorlabs3079' },
];

export default () => (
  <Card maxWidth="max-w-lg">
    <Title>Website Analytics</Title>
    <Flex marginTop="mt-4">
      <Text><Bold>Source</Bold></Text>
      <Text><Bold>Visits</Bold></Text>
    </Flex>
    <BarList data={ data } marginTop="mt-2" />
  </Card>
);

API Reference: BarList

data
Description
Array of objects, with each object containing a value (number), name (string) and an optional key, icon and href key.
Type
array
Default
-
Values
E.g. [{ name: 'string', value: 91, icon: MailIcon, href: 'string' }]
coloroptional
Description
Sets color of the marker.
Type
string
Default
blue
Values
See color section
valueFormatteroptional
Description
Format function for displayed values.
Type
function
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