> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Legend

## Overview

The `legend` property controls where the legend appears and whether it's visible. The legend shows which color or pattern represents each data series.

```tsx theme={null}
const config: GraphConfig = {
  legend: {
    position: 'right',
  },
};
```

## Position

<ParamField path="legend.position" type="'auto' | 'top' | 'right' | 'none'" default="auto">
  Where to position the legend: - `'auto'` - Automatically determine the appropriate position based on chart size and
  type - `'top'` - Show the legend above the chart - `'right'` - Show the legend to the right of the chart - `'none'` -
  Hide the legend completely
</ParamField>

```tsx theme={null}
legend: {
  position: 'right';
}
```

<Note>
  Even when the legend is hidden with `position: 'none'`, series colors are still applied to the chart. The legend
  position only affects visibility and placement, not the styling.
</Note>

## Legend interaction

When visible, the legend is interactive:

* **Click** a legend item to toggle the series visibility (in supported contexts)

## Complete example

```tsx theme={null}
const config: GraphConfig = {
  type: 'line',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'productA', label: 'Product A' },
      { key: 'productB', label: 'Product B' },
      { key: 'productC', label: 'Product C' },
    ],
    rows: [
      { month: 'Jan', productA: 100, productB: 150, productC: 120 },
      { month: 'Feb', productA: 120, productB: 160, productC: 140 },
      { month: 'Mar', productA: 140, productB: 180, productC: 130 },
    ],
  },
  legend: {
    position: 'right', // Show series labels on the right
  },
};
```