Kendo Chart - refresh fails if originally initialized to no data. #8088
Description
I have a chart which is first of all initialized to no data. When a long-running ajax call completes, my code then sets the data on the chart.
This has stopped working with version 2024.4.1112.
If a chart has been initialized with no data, calling refresh has no effect, even after it has been given data.
If a chart has been initialized with data, calling refresh still works.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css">
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
</head>
<body>
<div>
<button id="btnChange">Change</button>
<span id="explanation">(Pressing this button sets the data on both charts)</span>
</div>
<div id="chart1"></div>
<div id="chart2"></div>
<script>
const seriesOne = [
{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6]
},
{
name: "United States",
data: [67.96, 68.93, 75, 74, 78]
}
];
const categoriesOne = [2005, 2006, 2007, 2008, 2009];
const seriesTwo = [
{
name: "Australia",
data: [ 26.6, 23.5, 15.7, 16.7, 20 ]
},
{
name: "Canada",
data: [75, 67.96, 78, 68.93, 74]
},
{
name: "England",
data: [30.3, 23.2, 87.3, 35.7]
}
];
const categoriesTwo = [2015, 2016, 2017, 2018, 2019];
$("#chart1").kendoChart({
title: {
text: "Originally initialized with no data"
},
chartArea: {
height: 200
},
legend: {
position: "top"
},
seriesDefaults: {
type: "area",
stack: true
},
series: [], // seriesOne,
valueAxis: {
labels: {
format: "{0}%"
}
},
categoryAxis: {
categories: []
}
});
$("#chart2").kendoChart({
title: {
text: "Originally initialized with data"
},
chartArea: {
height: 400
},
legend: {
position: "top"
},
seriesDefaults: {
type: "area",
stack: true
},
series: seriesOne,
valueAxis: {
labels: {
format: "{0}%"
}
},
categoryAxis: {
categories: categoriesOne
}
});
$("#btnChange").click(
() => {
for(let chartId of ["#chart1", "#chart2"])
{
const chart = $(chartId).data("kendoChart");
if (chart) {
chart.options.series = seriesTwo;
chart.options.categories = categoriesTwo;
chart.refresh();
}
}
$("#explanation").text("Have now set the same data on both charts");
}
);
</script>
</body>
</html>