Legend

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.

 <div controller={PageController}>
  <Legend />
  <Svg style="width: 500px; height: 300px; border: 1px dashed #ddd">
    <Chart
      margin="20 20 40 50"
      axes={{
        x: <NumericAxis />,
        y: <NumericAxis vertical />,
      }}
    >
      <Rectangle fill="white" />
      <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> 
 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);
  }
} 
 interface Model {
  data: { x: number; sales: number; profit: number; costs: number }[];
  salesActive: boolean;
  profitActive: boolean;
  costsActive: boolean;
}

const m = createModel<Model>(); 
 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"; 

Sales

Profit

Costs

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.