Auto resize charts on responsive web design?

[Dirk]

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.

[Iliana Dyankova]

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

[Mark]

'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.

[Annette McGinley]

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();
     });
   }
};

[Rob]

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();
   });

[Andy]

Probably better to use this;

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

[Michael]

Excellent solution! Just curious how you knew this? :)

[Nestor]

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']"));
});

[Neil]

This is better than the "refresh" since I don't want to fetch the again every time I resize the page..

[Alex Hajigeorgieva]

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