New to KendoReact? Start a free 30-day trial

Managing Initial Visibility of Chart Series in React

Updated on Dec 19, 2025

Environment

Product Version	9.0.0
Product	Progress® KendoReact Chart

When working with the KendoReact Chart, there may be a requirement to set the initial visibility of a series. This involves not only setting the visibility at the initial render but also controlling it programmatically when interacting with the chart's legend. This KB article also answers the following questions:

How to initially hide a series in a React Chart?
How to toggle series visibility with legend clicks in React?
How to manage chart series states programmatically in React?

Solution

To control the visibility of a chart series in React, you need to manage the visibility state programmatically, especially when interacting with the chart's legend to toggle the visibility of series.

jsx

const onLegendItemClick = (e) => {
    var clickedItem = series[e.pointIndex];

    let newSeries = series.map((item) => {
        if (item.category === clickedItem.category) {
            item.visible = !item.visible;
        }
        return item;
    });

    setData(newSeries);
};

Here's a runnable sample demonstrating the approach described above:

Change Theme

Theme

Loading ...

Managing Initial Visibility of Chart Series in React

Environment

Description

Solution

See Also