Charts Legend

!npm (scoped)

Installation

$3

``shell
pnpm add @lg-charts/legend
`

$3

`shell
yarn add @lg-charts/legend
`

$3

`shell
npm install @lg-charts/legend
`

Example

To use the Legend, ensure your Legend instance and corresponding chart components are wrapped in a SeriesProvider instance.

`tsx
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 (

{lineData.map(({ data, name }) => (

))}

);
};
`

Properties

$3

| Prop | Type | Description | Default |
| ---------------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------- | ------- |
| series | Array | 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` |