Components
Legend
A color-coded legend which goes well with data bar components.
Category 1
Category 2
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
Active users
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
Text InputList