Implementing External Legend in KendoReact Chart

Updated on Dec 19, 2025

Environment

Product Version	9.0.0
Product	Progress® KendoReact Chart

Description

I want to move the ChartLegend outside the Chart and link the ChartSeries to it.

This KB article also answers the following questions:

• How do I create an external legend in KendoReact Chart?
• Can I link ChartSeries to an external ChartLegend in KendoReact?
• How to set up an external legend for KendoReact Chart?

Solution

To implement an external legend for the KendoReact Chart, follow these steps:

1. Create a KendoReact chart
2. Create an html element that represents the layout of the needed external legend and map it to the chart series data:

javascript

<div>
    <h5>Legend</h5>
    {series.map((item, idx) => {
        return (
            <p
                key={idx}
                style={{ color: item.color, opacity: item.visible ? 1 : 0.5 }}
                onClick={(e) => handleLegendItemClick(e, item)}
            >
                {item.name}
            </p>
        );
    })}
</div>

3. Attach a click handler to the created legend items in order to update the visibility other the chart series on each external legend item click:

javascript

const handleLegendItemClick = (e, seriesItem) => {
    let newSeries = series.map((item) => {
        if (item.name === seriesItem.name) {
            item.visible = !item.visible;
        }
        return item;
    });
    setSeries(newSeries);
};

You can test the described approach here:

Change Theme

Theme

Loading ...

See Also

• KendoReact Chart Documentation
• KendoReact ChartSeriesItem API
• KendoReact ChartLegend API