Persist Series Visibility After Changing the Chart Options

Updated on Dec 10, 2025

Environment

Product Version	2021.3.1207
Product	Progress® Kendo UI® Chart for jQuery

Description

I set the persistSeriesVisibility configuration to true, however the series visibility changes when I call the setOptions method. How can I persist the current state of the series visibility?

Solution

1. Save the current configuration of the series.
2. Call the setOptions method to update the Chart.
3. Obtain a reference to the updated configuration of the series.
4. Loop through the series and programmatically call the toggleVisibility method to update the visibility status of the series.

<h3>To test the functionality, click on one of the series in the Chart Legend to the right. The series will become
    invisible. Click on the SetOptions button to update the title of the Chart without affecting the visibility.</h3>
<button id=set>Call SetOptions</button>
<div id="chart"></div>
<script>
    $("#chart").kendoChart({
        persistSeriesVisibility: true,
        dataSource: [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }],
        series: [
            { name: "Series 1", field: "value" },
            { name: "Series 2", field: "value" }
        ]
    });

    $("#set").on("click", function () {
        var chart = $("#chart").getKendoChart();

        // Save the current state of the series.
        let oldSeries = chart.options.series;
        // Call setOptions to update the Chart configuration.
        chart.setOptions({ title: "Added Chart Title" });
        // Get a reference to the updated series.
        let currentSeries = chart.options.series;

        // Update the visibility status of each series.
        currentSeries.forEach(function (x, i) {
            chart.findSeriesByIndex(i).toggleVisibility(oldSeries[i].visible);
        });
    });
</script>