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,345

6724
0
10345

  1. Active users

  2. Inactive users

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

export default () => (
  <Card key={item.category} className="max-w-md">
    <Text> {item.category} </Text>
    <Metric> {item.stat} </Metric>
    <CategoryBar
      className="mt-4"
      categoryPercentageValues={item.categoryValues}
      colors={item.categoryColors}
    />
    <Legend
      className="mt-3"
      categories={item.categoryNames}
      colors={item.categoryColors}
    />
  </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