UI

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

API Reference: Legend

client component
categories
Required
string[]
Define the categories in the legend.
colors
(Color | string)[]
Change the default colors. When using Typescript, import the Color type provided by Tremor.
onClickLegendItem
(name: string, color: Color) => void;
Callback function for when the value of the component changes..
activeLegend
string
Set's the active legend item.
enableLegendSlider
boolean

Default: false

Adds a slider functionality to the legend instead of wrapping the legend items.

Theming

Legend

Text color legend
colorstremor-content-DEFAULT
Text color legend
colorstremor-content-DEFAULT
Text color legend (hover)
colorstremor-content-emphasis
Font size legend
colorstremor-default
Background color legend (hover)
colorstremor-background-subtle
Chevron Color Slider
colorstext-tremor-content
Chevron Color Slider (hover)
colorstext-tremor-content-emphasis
Chevron Color Slider Background (hover)
colorsbg-tremor-background-subtle