How to make Telerik Radhtmlchart responsive?

Question

I have 3 graphics RadHtmlChart of Telerik on a page, I’m dividing this page into 3 so that they are always displayed, without the need to roll a scroll to view them.

I need that when resizing the page, the RadHtmlChart fits with this resizing. It is possible to do this ?

I tried the following:

 window.onresize = function () {
         $find("<%=chtPESO.ClientID%>").get_kendoWidget().resize();
         $find("<%=chtPARTIC.ClientID%>").get_kendoWidget().resize();
         $find("<%=chtVDA.ClientID%>").get_kendoWidget().resize();
 }

But with no result.

I also tried using the @media screen, but also unsuccessful.

How can I do that ?

Answer 1

You need to use the functions set_width and set_height to resize the chart.

You just need to calculate the proper dimensions to fill the entire screen.

function adjustChartSize(chartClientId, width, height) {
   var chart = $find(chartClientId);

   if (chart) {
      chart.set_width(width);
      chart.set_height(height);
   }
}

window.onresize = function () {
   adjustChartSize("<%=chtPESO.ClientID%>"   , 300, 400);
   adjustChartSize("<%=chtPARTIC.ClientID%>" , 300, 400);
   adjustChartSize("<%=chtVDA.ClientID%>"    , 300, 400);
}