This is a migrated thread and some comments may be shown as answers.

Auto resize charts on responsive web design?

9 Answers 2798 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Dirk
Top achievements
Rank 1
Dirk asked on 21 Mar 2013, 10:23 AM
Is it possible to resize a bar chart or whatever on risizing the browser window? I'm using the Bootstrap framework for the responsive layout. If I put a chart into a 12-column-grid, the chart fits as expected the full width, same on a 4-column grid e.g., the chart is small. That's ok. But: I which that the chart reacts in the same way as images doing by resizing the window . That means, e.g. a 12-grid-chart should shrink smaller if the browser window gets even small.

Thanks for help.

9 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 21 Mar 2013, 07:33 PM
Hello Dirk,

Generally speaking, once rendered Kendo UI Chart cannot be resized (due to browser limitations). In order to achieve the desired behavior you should refresh() the chart and recreate the widget with the new dimensions. For your convenience here is a simple jsBin example which demonstrates the suggested approach in action.

Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
answered on 05 Aug 2013, 09:33 PM
'Sup Peeps?

We had a problem in that when the browser window becomes smaller, the code to refresh the chart does not decrease its size.  We solved this problem with a little hackery:

    jQuery(window).on("resize", function(event) {
        var chartDiv = jQuery("#ChartName"); 
        var chart = chartDiv.data("kendoChart");
        
        // Temporarily disable animation, yo!
        chart.options.transitions = false;

        // Temporarily hide, then set size of chart to container (which will naturally resize itself), then show it again 

        chartDiv.css({ display:"none" });
        chartDiv.css({ width:chartDiv.parent().innerWidth(), display:"block" });
   
        chart.redraw();   
    });

Worked for us!   Good luck..... and may the force be with y'all.
0
Annette McGinley
Top achievements
Rank 1
answered on 12 Aug 2013, 10:49 AM
Hello Dirk
Being fairly new to response design and all that goes with it so not sure if this is the a good way of doing it but I am using Knockout JS and I used Marks suggestion wrapped in a binding handler which seems to work quite nicely. Thanks Mark

ko.bindingHandlers.chartresize = {
     init: function (element, valueAccessor) {
               $(window).resize(function () {
                   var value = valueAccessor();
                   var chartDiv = $(element);
                   var chart = chartDiv.data("kendoChart");

                   chart.options.transitions = false;

                   chartDiv.css({ display: "none" });
                  // subtract a value to customize width in the container
                 chartDiv.css({ width: chartDiv.parent().innerWidth() - value, display: "block" })

                  chart.redraw();
     });
   }
};
0
Rob
Top achievements
Rank 1
answered on 01 Aug 2014, 05:40 PM
jQuery(window).on("resize", function(event) {
       var chartDiv = jQuery("#ChartName");
       var chart = chartDiv.data("kendoChart");
        
       // Temporarily disable animation, yo!
       chart.options.transitions = false;
 
       // Temporarily hide, then set size of chart to container (which will naturally resize itself), then show it again
       chartDiv.css({ display:"none" });
       chartDiv.css({ width:chartDiv.parent().innerWidth(), display:"block" });
    
       chart.redraw();  
   });
0
Andy
Top achievements
Rank 1
answered on 08 Sep 2014, 01:35 PM
Probably better to use this;

$(window).resize(function()
{
    kendo.resize($("div.k-chart[data-role='chart']"));
});
0
Michael
Top achievements
Rank 1
answered on 17 Nov 2015, 08:27 AM
Excellent solution! Just curious how you knew this? :)
0
Nestor
Top achievements
Rank 2
answered on 19 Mar 2019, 04:54 PM

I've been facing this issue for weeks, I was about to switch to Google charts and then I fond this post, I believe this should be included in the Demos section,...Thanks Andy, 

$(window).resize(function()

{
    kendo.resize($("div.k-chart[data-role='chart']"));
});

0
Neil
Top achievements
Rank 1
answered on 13 Feb 2020, 11:37 AM
This is better than the "refresh" since I don't want to fetch the again every time I resize the page..
0
Alex Hajigeorgieva
Telerik team
answered on 14 Feb 2020, 09:30 AM

Hi, 

The kendo.resize() method can be used on window resize. It will find all the elements that are kendo widgets and call their resize() methods.

https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages#widgets-that-do-not-auto-resize

Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Charts
Asked by
Dirk
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Mark
Top achievements
Rank 1
Annette McGinley
Top achievements
Rank 1
Rob
Top achievements
Rank 1
Andy
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Nestor
Top achievements
Rank 2
Neil
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or