5

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

Community
  • 1
  • 1
sozhen
  • 7,627
  • 14
  • 36
  • 53

1 Answers1

9

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.

Mark
  • 106,305
  • 20
  • 172
  • 230
  • Thanks, I've been thinking about using refresh to update the chart, is it the only way to handle this? Or some CSS code can be applied to solve this. Thanks. – sozhen Jul 06 '12 at 18:19
  • Mark thank you very much. If you have time please take a look at [this question](http://stackoverflow.com/questions/11371374/chart-rendering-issue-with-resizing-div-container), I've been trying to fix for long time. – sozhen Jul 07 '12 at 20:42
  • 5
    $(window).resize(function(){ kendo.resize($(".k-chart")); }); will do the job without refreshing the chart. – xkcd Mar 20 '14 at 13:03