Persist Series Visibility After Changing the Chart Options
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
- Save the current configuration of the series.
- Call the
setOptions
method to update the Chart. - Obtain a reference to the updated configuration of the series.
- 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>