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";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

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

export default () => (
  <Legend 
    categories={[]}
    colors={[]}
    marginTop='mt-0'
    /> 
);

Usage example

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

Total users

10,345

6724
10345
0
10345
  1. Active users

  2. Inactive users

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

export default () => (
    <Card maxWidth="max-w-md">
      <Text> Total users </Text>
      <Metric> 10,345 </Metric>
      <CategoryBar
        categoryPercentageValues={[30, 70]}
        colors={["emerald", "red"]}
        marginTop="mt-4"
      />
      <Legend
        categories={["Active users", "Inactive users"]}
        colors={["emerald", "red"]}
        marginTop="mt-3"
      />
    </Card>
);

API Reference: Legend

categories
Description
Define the categories in the legend.
Type
array
Default
Values
E.g. ['Active users', 'Inactive users']
colorsoptional
Description
Set the colors of the categories.
Type
array
Default
Values
See color section
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0