---
category: components
name: Legend
---

Legend renders a collection of labels and color swatches to accompany a chart.
The `series` prop expects an array of objects with `label` and `className`
keys. `className` will be applied to the swatch div element to style it.

```jsx_example
function Example () {
  return (
    <div>
      <style dangerouslySetInnerHTML={{__html: `
        .oneClass { background: repeating-linear-gradient(
          90deg,
          transparent, transparent 37%, grey 37%, grey 63%
        ); }
        .twoClass { background: repeating-linear-gradient(
          90deg,
          transparent -12%, transparent 12%, grey 12%, grey 37%
        ); }
      `}} />
      <Legend series={[
        { className: 'oneClass', label: 'One Fish' },
        { className: 'twoClass', label: 'Two Fish' }
      ]} />
    </div>
  )
}

<LocaleSwitcher>
  <Example />
</LocaleSwitcher>
```

Set `variant="row"` to arrange the series in a row instead of column. The row
variant has no border style.

```jsx_example
function Example () {
  return (
    <div>
      <style dangerouslySetInnerHTML={{__html: `
        .redClass { background-color: red; }
        .blueClass { background-color: blue; }
      `}} />
      <Legend
        series={[
          { className: 'redClass', label: 'Red Fish' },
          { className: 'blueClass', label: 'Blue Fish' }
        ]}
        variant="row"
      />
    </div>
  )
}

<LocaleSwitcher>
  <Example />
</LocaleSwitcher>
```
