Components

Legend

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

   

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.

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