Legend

The Chart legend displays the name of the configured data series.

To customize the legend, use the ChartLegend configuration component.

The following example demonstrates how to configure the position and orientation of the Chart legend.

import {
    Chart,
    ChartLegend,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const seriesData = [1, 2, 3, 5];
const ChartContainer = () => (
    <Chart>
        <ChartLegend position="bottom" orientation="horizontal" />
        <ChartSeries>
            <ChartSeriesItem name="Fibonacci" data={seriesData} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Hiding the Legend

If you set the series names, the Chart displays a default legend.

The following example demonstrates how to hide the legend by using its visible property.

import {
    Chart,
    ChartLegend,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const seriesData = [1, 2, 3, 5];
const ChartContainer = () => (
    <Chart>
        <ChartLegend visible={false} />
        <ChartSeries>
            <ChartSeriesItem name="Fibonacci" data={seriesData} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Clicking Legend Items

Clicking the legend items triggers the onLegendItemClick event which can be used to toggle the visibility of the clicked series. When onLegendItemClick is not handled, the Chart itself toggles the series visibility.

import {
    Chart,
    ChartLegend,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

import 'hammerjs'

class ChartContainer extends React.Component {
    state = {
        seriesData: [1, 2, 3, 5],
        seriesVisible: true
    }

    render() {
        const {seriesData, seriesVisible } = this.state;
        return (
            <Chart onLegendItemClick={this.onLegendItemClick}>
                <ChartLegend />
                <ChartSeries>
                    <ChartSeriesItem name="Fibonacci" visible={seriesVisible} data={seriesData} />
                </ChartSeries>
            </Chart>
        );
    }

    onLegendItemClick = (e) => {
        /* Hide the series manually */
        this.setState((prevState)=> ({ seriesVisible: !prevState.seriesVisible }));
    }
}

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Customizing the Position

You can remove the legend from the flow and absolutely position it by setting the position to custom and configuring the offsetX and offsetY options.

import {
    Chart,
    ChartLegend,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const seriesData = [1, 2, 3, 5];
const ChartContainer = () => (
    <Chart>
        <ChartLegend position="custom" offsetX={40} offsetY={25} />
        <ChartSeries>
            <ChartSeriesItem name="Fibonacci" data={seriesData} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);
 /