New to Kendo UI for jQueryStart a free 30-day trial

Persist Series Visibility After Changing the Chart Options

Environment

Product Version2021.3.1207
ProductProgress® 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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support