Density

Legend

Legend renders color-coded labels for chart series. Each item needs a color and title, and can include a subtitle.

Revenue
Expenses
Returns
import { Legend } from "density-base-ui";

export default function LegendExample() {
  return (
    <Legend
      items={[
        { color: "success", title: "Revenue" },
        { color: "warning", title: "Expenses" },
        { color: "destructive", title: "Returns" },
      ]}
    />
  );
}

Items

Pass each series through items. Use subtitle for a secondary value or detail.

Revenue$12,480
Expenses$8,320
Returns$1,240
import { Legend } from "density-base-ui";

export default function LegendItemExample() {
  return (
    <Legend
      items={[
        { color: "success", subtitle: "$12,480", title: "Revenue" },
        { color: "warning", subtitle: "$8,320", title: "Expenses" },
        { color: "destructive", subtitle: "$1,240", title: "Returns" },
      ]}
    />
  );
}

Style

Legends use rounded square swatches by default. Set legendStyle="dot" for circular markers.

Swatch
Dot
import { Legend, View } from "density-base-ui";

export default function LegendStyleExample() {
  return (
    <View>
      <Legend
        items={[{ color: "success", title: "Swatch" }]}
        legendStyle="swatch"
      />
      <Legend items={[{ color: "success", title: "Dot" }]} legendStyle="dot" />
    </View>
  );
}

Orientation

Legends are horizontal and wrap by default. Set orientation="vertical" for a stacked legend.

Revenue
Expenses
Revenue
Expenses
import { Legend, Separator, View } from "density-base-ui";

export default function LegendOrientationExample() {
  return (
    <View>
      <Legend
        items={[
          { color: "success", title: "Revenue" },
          { color: "warning", title: "Expenses" },
        ]}
        orientation="horizontal"
      />
      <Separator />
      <Legend
        items={[
          { color: "success", title: "Revenue" },
          { color: "warning", title: "Expenses" },
        ]}
        orientation="vertical"
      />
    </View>
  );
}

Size

2X-Small
X-Small
Small
Medium
Large
X-Large
2X-Large
3X-Large
import { Legend, View } from "density-base-ui";

export default function LegendSizeExample() {
  return (
    <View align="start">
      <Legend items={[{ color: "success", title: "2X-Small" }]} size="2xs" />
      <Legend items={[{ color: "success", title: "X-Small" }]} size="xs" />
      <Legend items={[{ color: "success", title: "Small" }]} size="sm" />
      <Legend items={[{ color: "success", title: "Medium" }]} size="md" />
      <Legend items={[{ color: "success", title: "Large" }]} size="lg" />
      <Legend items={[{ color: "success", title: "X-Large" }]} size="xl" />
      <Legend items={[{ color: "success", title: "2X-Large" }]} size="2xl" />
      <Legend items={[{ color: "success", title: "3X-Large" }]} size="3xl" />
    </View>
  );
}