# Legend

```ts
import { Legend, LegendEntry } from 'cx/charts';
```

The `Legend` component displays an index of chart elements. Chart components like `LineGraph`, `ColumnGraph`, and `PieSlice` automatically register with the legend when they have a `name` property.

Click on legend entries to toggle visibility of the corresponding series. This requires binding the `active` property on chart components.

```tsx
import { Svg, Rectangle } from "cx/svg";
import { Chart, NumericAxis, Gridlines, LineGraph, Legend } from "cx/charts";
import { createModel } from "cx/data";
import { Controller } from "cx/ui";

interface Model {
  data: { x: number; sales: number; profit: number; costs: number }[];
  salesActive: boolean;
  profitActive: boolean;
  costsActive: boolean;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(
      m.data,
      Array.from({ length: 15 }, (_, i) => ({
        x: i * 10,
        sales: 50 + Math.random() * 50,
        profit: 30 + Math.random() * 40,
        costs: 20 + Math.random() * 30,
      })),
    );
    this.store.set(m.salesActive, true);
    this.store.set(m.profitActive, true);
    this.store.set(m.costsActive, true);
  }
}

export default (
  <div controller={PageController}>
    <Legend />
    <Svg style="width: 500px; height: 300px;">
      <Chart
        margin="20 20 40 50"
        axes={{
          x: <NumericAxis />,
          y: <NumericAxis vertical />,
        }}
      >
        <Rectangle mod="cover" />
        <Gridlines />
        <LineGraph
          name="Sales"
          data={m.data}
          colorIndex={0}
          yField="sales"
          active={m.salesActive}
        />
        <LineGraph
          name="Profit"
          data={m.data}
          colorIndex={4}
          yField="profit"
          active={m.profitActive}
        />
        <LineGraph
          name="Costs"
          data={m.data}
          colorIndex={8}
          yField="costs"
          active={m.costsActive}
        />
      </Chart>
    </Svg>
  </div>
);

```

When multiple charts are on the same page, use `Legend.Scope` to prevent legends from interfering with each other.

## Configuration

| Property      | Type            | Description                                                                  |
| ------------- | --------------- | ---------------------------------------------------------------------------- |
| `vertical`    | `boolean`       | Set to `true` for vertical layout.                                           |
| `shape`       | `string`        | Shape of the symbol in legend entries (`circle`, `square`, `triangle`, etc). |
| `showValues`  | `boolean`       | Set to `true` to show values in the legend.                                  |
| `valueFormat` | `string`        | Format string for legend entry values. Default is `"s"`.                     |
| `entryClass`  | `string/object` | Additional CSS classes for legend entry elements.                            |
| `entryStyle`  | `string/object` | Additional CSS styles for legend entry elements.                             |
| `valueClass`  | `string/object` | Additional CSS classes for legend entry values.                              |
| `valueStyle`  | `string/object` | Additional CSS styles for legend entry values.                               |