Here is the settings of the pie chart:
function createChart(chartDataSource) {
$("#chart").kendoChart({
theme:$(document).data("kendoSkin") || "black",
title:{
text:"Efficiency"
},
legend:{
position:"bottom"
},
dataSource:chartDataSource,
series:[
{
type:"pie",
field:"val",
categoryField:"status"
}
],
tooltip:{
visible:true,
template:"${category} - #= kendo.format('{0:P}', percentage)#"
}
});
CSS style:
#chart {
width: 50%;
height: 50%;
}
I know that Highcharts has reflow
boolean (reflow example in StackOverflow) did exactly what I want.
I am not sure whether kendoUI chart have the same reflow setting or I should play around with the CSS style. If go for CSS, how to make such setting?
Thanks
Applying my idea in your linked post, just hook the window resize event and redraw the chart:
$(window).resize(function()
{
var chart = $("#chart").data("kendoChart");
chart.refresh();
});
Working fiddle here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With