1. Components
  2. Legend

Components

Legend

A color-coded legend which goes well with data bar components.

  1. Category 1

  2. Category 2

  3. Category 3

   

Import Legend

Tremor exports one component for Legend.

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

Usage example

The example below shows a KPI card in employing Legend to display more information about the data.

Total Users

10,483

6724
0
10345

  1. Active users

  2. Inactive users

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

export default () => (
    <Card className="max-w-md mx-auto">
        <Text>Total Users</Text>
        <Metric>10,483</Metric>
        <CategoryBar
            className="mt-4"
            categoryPercentageValues={ [6724, 3621] }
            colors={ ['emerald', 'red'] }
        />
        <Legend
            className="mt-3"
            categories={ ['Active users', 'Inactive users'] }
            colors={ ['emerald', 'red'] }
        />
    </Card>
);

API Reference: Legend

categories
Description
Define the categories in the legend.
Type
string[]
Default
Values
E.g. ['Active users', 'Inactive users']
colorsoptional
Description
Change the default colors. When using Typescript, import the Color type provided by tremor.
Type
Color[]
Default
Values
E.g. ['blue', 'indigo'].
IconsList