# Legend

> Identify each chart series and optionally control pointer selection.

Source: https://www.honestui.com/docs/charts/ui/legend

## Usage [#usage]

Compose the legend as a child of the chart root. Pass `variant` to control the
indicator style, and `isClickable` to let each entry toggle selection of its
series. Canvas legend selection is pointer-operated, so use an external keyboard-operable control if changing the selected series is required.

```tsx
import { LineChart } from "honestui/charts";

<LineChart data={data} config={chartConfig} xDataKey="month">
  <LineChart.Legend variant="circle" isClickable />
  <LineChart.Line dataKey="highTemp" />
  <LineChart.Line dataKey="lowTemp" />
</LineChart>
```

## Variants [#variants]

Control the legend indicator style with the `variant` prop on
`<LineChart.Legend />`.

### Square [#square]

### variant='square'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Search quality
const data = [
  { month: "January", relevant: 300, irrelevant: 200 },
  { month: "February", relevant: 690, irrelevant: 477 },
  { month: "March", relevant: 443, irrelevant: 307 },
  { month: "April", relevant: 537, irrelevant: 403 },
  { month: "May", relevant: 382, irrelevant: 338 },
  { month: "June", relevant: 623, irrelevant: 433 },
  { month: "July", relevant: 359, irrelevant: 251 },
  { month: "August", relevant: 747, irrelevant: 542 },
  { month: "September", relevant: 516, irrelevant: 382 },
  { month: "October", relevant: 446, irrelevant: 380 },
  { month: "November", relevant: 649, irrelevant: 491 },
  { month: "December", relevant: 282, irrelevant: 176 },
];

const chartConfig = {
  relevant: {
    label: "Relevant",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  irrelevant: {
    label: "Irrelevant",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function LegendSquareLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Legend variant="square" />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="relevant" />
      <LineChart.Line dataKey="irrelevant" />
    </LineChart>
  );
}

```

### Circle [#circle]

### variant='circle'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Battery testing
const data = [
  { month: "January", charge: 408, discharge: 116 },
  { month: "February", charge: 990, discharge: 271 },
  { month: "March", charge: 612, discharge: 181 },
  { month: "April", charge: 748, discharge: 237 },
  { month: "May", charge: 532, discharge: 204 },
  { month: "June", charge: 889, discharge: 244 },
  { month: "July", charge: 486, discharge: 147 },
  { month: "August", charge: 1065, discharge: 309 },
  { month: "September", charge: 734, discharge: 225 },
  { month: "October", charge: 622, discharge: 227 },
  { month: "November", charge: 923, discharge: 275 },
  { month: "December", charge: 365, discharge: 107 },
];

const chartConfig = {
  charge: {
    label: "Charge",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  discharge: {
    label: "Discharge",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function LegendCircleLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Legend variant="circle" />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="charge" />
      <LineChart.Line dataKey="discharge" />
    </LineChart>
  );
}

```

### Circle Outline [#circle-outline]

### variant='circle-outline'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: App performance
const data = [
  { month: "January", coldStart: 442, warmStart: 133 },
  { month: "February", coldStart: 1072, warmStart: 312 },
  { month: "March", coldStart: 661, warmStart: 206 },
  { month: "April", coldStart: 808, warmStart: 270 },
  { month: "May", coldStart: 576, warmStart: 231 },
  { month: "June", coldStart: 962, warmStart: 281 },
  { month: "July", coldStart: 524, warmStart: 168 },
  { month: "August", coldStart: 1151, warmStart: 356 },
  { month: "September", coldStart: 796, warmStart: 257 },
  { month: "October", coldStart: 673, warmStart: 258 },
  { month: "November", coldStart: 998, warmStart: 318 },
  { month: "December", coldStart: 392, warmStart: 120 },
];

const chartConfig = {
  coldStart: {
    label: "Cold start",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  warmStart: {
    label: "Warm start",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function LegendCircleOutlineLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Legend variant="circle-outline" />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="coldStart" />
      <LineChart.Line dataKey="warmStart" />
    </LineChart>
  );
}

```

### Rounded Square (Default) [#rounded-square-default]

### variant='rounded-square'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Rental utilization
const data = [
  { month: "January", reserved: 509, available: 166 },
  { month: "February", reserved: 1236, available: 395 },
  { month: "March", reserved: 759, available: 257 },
  { month: "April", reserved: 927, available: 337 },
  { month: "May", reserved: 665, available: 284 },
  { month: "June", reserved: 1109, available: 357 },
  { month: "July", reserved: 601, available: 209 },
  { month: "August", reserved: 1323, available: 449 },
  { month: "September", reserved: 918, available: 319 },
  { month: "October", reserved: 775, available: 319 },
  { month: "November", reserved: 1149, available: 405 },
  { month: "December", reserved: 447, available: 148 },
];

const chartConfig = {
  reserved: {
    label: "Reserved",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  available: {
    label: "Available",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function LegendRoundedSquareLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Legend variant="rounded-square" />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="reserved" />
      <LineChart.Line dataKey="available" />
    </LineChart>
  );
}

```

### Rounded Square Outline [#rounded-square-outline]

### variant='rounded-square-outline'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Donation cadence
const data = [
  { month: "January", oneTime: 266, recurring: 183 },
  { month: "February", oneTime: 608, recurring: 436 },
  { month: "March", oneTime: 393, recurring: 282 },
  { month: "April", oneTime: 477, recurring: 370 },
  { month: "May", oneTime: 338, recurring: 311 },
  { month: "June", oneTime: 549, recurring: 395 },
  { month: "July", oneTime: 320, recurring: 230 },
  { month: "August", oneTime: 661, recurring: 496 },
  { month: "September", oneTime: 455, recurring: 351 },
  { month: "October", oneTime: 395, recurring: 350 },
  { month: "November", oneTime: 574, recurring: 448 },
  { month: "December", oneTime: 255, recurring: 162 },
];

const chartConfig = {
  oneTime: {
    label: "One-time",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  recurring: {
    label: "Recurring",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function LegendRoundedSquareOutlineLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Legend variant="rounded-square-outline" />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="oneTime" />
      <LineChart.Line dataKey="recurring" />
    </LineChart>
  );
}

```

### Vertical Bar [#vertical-bar]

### variant='vertical-bar'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Server health
const data = [
  { month: "January", cpu: 334, memory: 217 },
  { month: "February", cpu: 772, memory: 518 },
  { month: "March", cpu: 492, memory: 332 },
  { month: "April", cpu: 596, memory: 436 },
  { month: "May", cpu: 426, memory: 365 },
  { month: "June", cpu: 696, memory: 471 },
  { month: "July", cpu: 397, memory: 272 },
  { month: "August", cpu: 833, memory: 589 },
  { month: "September", cpu: 578, memory: 413 },
  { month: "October", cpu: 497, memory: 411 },
  { month: "November", cpu: 724, memory: 534 },
  { month: "December", cpu: 310, memory: 190 },
];

const chartConfig = {
  cpu: {
    label: "CPU",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  memory: {
    label: "Memory",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function LegendVerticalBarLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Legend variant="vertical-bar" />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="cpu" />
      <LineChart.Line dataKey="memory" />
    </LineChart>
  );
}

```

### Horizontal Bar [#horizontal-bar]

### variant='horizontal-bar'

```tsx
"use client";

import { LineChart, type ChartConfig } from "honestui/charts";

// Scenario: Café demand
const data = [
  { month: "January", coffee: 476, tea: 150 },
  { month: "February", coffee: 1154, tea: 353 },
  { month: "March", coffee: 710, tea: 232 },
  { month: "April", coffee: 867, tea: 303 },
  { month: "May", coffee: 621, tea: 258 },
  { month: "June", coffee: 1035, tea: 319 },
  { month: "July", coffee: 563, tea: 189 },
  { month: "August", coffee: 1237, tea: 402 },
  { month: "September", coffee: 857, tea: 288 },
  { month: "October", coffee: 724, tea: 288 },
  { month: "November", coffee: 1074, tea: 362 },
  { month: "December", coffee: 420, tea: 134 },
];

const chartConfig = {
  coffee: {
    label: "Coffee",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  tea: {
    label: "Tea",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function LegendHorizontalBarLineChart() {
  return (
    <LineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
    >
      <LineChart.Grid />
      <LineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
      <LineChart.Legend variant="horizontal-bar" />
      <LineChart.Tooltip />
      <LineChart.Line dataKey="coffee" />
      <LineChart.Line dataKey="tea" />
    </LineChart>
  );
}

```

## API Reference [#api-reference]

Props for the `<LineChart.Legend />` part.


  ### `variant`

type: `&#x22;square&#x22; | &#x22;circle&#x22; | &#x22;circle-outline&#x22; | &#x22;rounded-square&#x22; | &#x22;rounded-square-outline&#x22; | &#x22;vertical-bar&#x22; | &#x22;horizontal-bar&#x22;` · default: `&#x22;rounded-square&#x22;`

Style of the legend indicator icon.

  ### `align`

type: `&#x22;left&#x22; | &#x22;center&#x22; | &#x22;right&#x22;` · default: `&#x22;right&#x22;`

Horizontal placement of the legend items.

  ### `verticalAlign`

type: `&#x22;top&#x22; | &#x22;middle&#x22; | &#x22;bottom&#x22;` · default: `&#x22;top&#x22;`

Vertical placement of the legend items.

  ### `isClickable`

type: `boolean` · default: `false`

When enabled, clicking an entry toggles selection of its series.