pnpm add @lg-charts/legendyarn add @lg-charts/legendnpm install @lg-charts/legendTo use the Legend, ensure your Legend instance and corresponding chart components are wrapped in a SeriesProvider instance.
import { Chart, ChartCard } from '@lg-charts/core';
import { Legend } from '@lg-charts/legend';
import { SeriesProvider } from '@lg-charts/series-provider';
const App = () => {
const lineData = getLineData(); // use a fetch endpoint or pass down line data
const series = lineData.map(({name}) => name);
return (
<SeriesProvider series={series}>
<Legend series={series}>
<Chart>
{lineData.map(({ data, name }) => (
<Line key={name} data={data} name={name} />
))}
</Chart>
</SeriesProvider>
);
};| Prop | Type | Description | Default |
|---|---|---|---|
series |
Array<string> |
An array of series names representing the data series to be displayed in the legend. | |
seriesNameFormatter (optional) |
(name: string) => React.ReactNode |
A function that formats the series name. The function is called with the series name as an argument. | |
showSelectAll (optional) |
boolean |
Determines whether or not to show the select all checkbox. | true |