dynamic resizing

[iamjoshua]

Is it possible to have a chart resize dynamically with parent div? i.e. 100% height/width

[oesmith]

A lot of people have asked for this.. I'll stick it on my todo list.

[DanielGenser]

This would be incredible.

[ferdinandsalis]

I'd love to see that too. What about only redrawing the svg when the resize has ended so the cpu doesn't get taxed too much. I have done that before like this,

    function Resize() {
      var lazyTrigger = _.debounce(_triggerLazyResize, 800);
      $(window).on('resize', lazyTrigger);
      _bindResizeStart();
    }

    var _bindResizeStart = function() {
      $(window).one('resize', function() {
        $(window).trigger('resize:start');
      });
    };

    var _triggerLazyResize = function() {
      $(window).trigger('resize:end');
      _bindResizeStart();
    };

I would then remove the svg on resize:start and redraw it on resize:end. During the resize one could show a fancy preloader. Overall I think its a pretty nice effect. However I had some problems in older browsers (if you can point me in a direction I would be very grateful).

What do you think.

[oesmith]

SVG-only fixes are an issue because old-IE uses VML instead.

This is a valuable feature though -- adding to the TODO list for v0.5.

[alexcurtis]

This would be a great addition. Especially in conjunction with Backbone + Responsive layouts.

[ljl]

This would be very useful.

[Kevlys]

This would be a great feature.

[d0z0]

+1

[pusewicz]

👍

[marccantwell]

+1

[wojons]

+1

[dboze]

+1

[elvista]

+2

[khoffma4]

+1

[kazzkiq]

👍

[quadcodes]

+1

[Teddy95]

Great, i hope v0.5 comes out soon! :)

[franckbrunet]

I vote for this one too!

[cnicodeme]

I'm on board for this feature too !

[oesmith]

OK, resizing is in master now. Please everyone give it a test drive with their charts and let me know how it works.

To enable resizing, pass resize: true with your chart options. It should work with all chart types.

If it's all good, it'll ship with v0.5.0, which will be the next release!

[kazzkiq]

It worked flawlessly in Chrome/Safari. Thanks!

[jeremywrowe]

Just as a heads up, when resizing in Firefox the timeout ends up in an infinite loop and the browser crashes / hangs

[oesmith]

@jeremywrowe Which version of Firefox are you testing with? can you create a jsbin that demonstrates the crash bug?

The example in examples/resize.html works OK for me on Firefox 25 on OS X.

[jeremywrowe]

@oesmith I am on firefox 25.0. It seems to be a byproduct of having multiple charts rendering on the same page. I have a line, stacked bar, and an area chart. I can get you a jsbin later today when I have a spare second :)

[cnicodeme]

Tested under Linux Fedora with :

• Chrome v30.0.1599.114 : Does seems to work. Parent div width is initially set at 475px, graph at 476px (svg width from Morris), after resizing, parent div width is at 571px, svg graph still at 476px.
• Firefox v24 : the same.

(I added the resize: true)

BUT, I was moving the width in javascript using padding/width of others elements. It appears that resizing is made when the browser trigger a resize event (after calling $(window).trigger('resize'), the graph was correctly updated.

You should precise this in the documentation containing resize option :)

Note: After calling resize, everything works as expected for Firefox AND Chrome

[guilbep]

@oesmith I'm setting data to [] to display nothing with morris.setData(data); unfortunately it throws error on me: Uncaught TypeError: Cannot read property 'length' of undefined in chrome at least (31) .. But I have some similar issue when I'm using the morris.redraw message when my data is []. Works good despite that 👍 Thanks!

[mikerockett]

Doesn't seem to work for me. I have my charts laid out in a table with multiple columns. Here's the markup:

<table class="table tableBordered" width="100%">
                        <tbody>
                            <tr>
                                <td width="50%">
                                    <strong>Pledge-count for the last 30 days</strong><br>
                                    <div id="dashboardPledgesMonthCount" style="height: 160px"></div>
                                </td>
                                <td width="50%">
                                    <strong>Amounts pledged from day-to-day</strong><br>
                                    <div id="dashboardPledgesMonthAmounts" style="height: 160px"></div>
                                </td>
                            </tr>

And these are the callers:

[...]

Morris.Bar({
    barColors: ['#cdcdcd'],
    data: countData,
    element: 'dashboardPledgesMonthCount',
    grid: false,
    gridTextFamily: 'Noto Sans',
    hideHover: 'auto',
    labels: ['Pledges Made'],
    resize: true,
    xkey: 'date',
    ykeys: ['Pledges Made'],
});

[...]

Morris.Line({
    data: amountData,
    element: 'dashboardPledgesMonthAmounts',
    grid: false,
    gridTextFamily: 'Noto Sans',
    hideHover: 'auto',
    labels: ['Amount Pledged'],
    lineColors: ['#242d3c', '#cdcdcd'],
    parseTime: false,
    preUnits: 'R ',
    resize: true,
    xkey: 'date',
    xLabels: 'date',
    ykeys: ['Amount Pledged'],
});

Result after resizing:

[mikerockett]

Just picked up that if it is loaded with a small width, it will resize up (grow wider), but it won't resize down (thinner).

[ghost]

Are there any plans to fix the issues with the resize ability of the plugin? I've set resize: true on all my charts but it doesn't appear to be working as intended?

[dumplingsol]

I did it like this:

$(document).ready(function() {
    barChart();

    $(window).resize(function() {
        window.m.redraw();
    });
});

function barChart() {

    window.m = Morris.Bar({

        element: 'stats-bar',
        data: [
            { y: '0.10', a: 93, b: 50, c: 23, d: 42, e: 10, f: 23 },
            { y: '0.20', a: 75,  b: 65 },
            { y: '0.30', a: 50,  b: 40 },
            { y: '0.40', a: 75,  b: 65 },
            { y: '0.50', a: 50,  b: 40 },
            { y: '0.60', a: 75,  b: 65 }
        ],
        xkey: 'y',
        ykeys: ['a', 'b', 'c', 'd', 'e', 'f'],
        labels: ['C', 'C#', 'C++', 'Java', 'Python 2', 'Python 3'],
        gridTextColor: '#898992',
        barColors: ['#4F89DB', '#333A92', '#5D57BA', '#2F1360', '#620F8B', '#872FB0'],
        stacked: true,
        hideHover: 'auto',
        resize: true,
        redraw: true

    });
}

Also to avoid getting a too wide svg, see to it that you dont forget the CSS:

#chart > svg {width: 100% !important;}

View result:
http://jsbin.com/nejoleqi/3

[astocks-cp]

Thanks jonathanolsen! This worked perfectly!

[morrow95]

Also running into this problem. Resizing on window change works perfectly fine. My issue is resizing when the charts parent container resizes. For instance, I am using BS3 and showing my charts in portlets. Say the portlet is 400px on load... now the dimensions of the portlet change to say 800px. The chart stays exactly the same as it was because the window has not resized, but instead its parent container did (the portlet).

I tried a similar chart plugin, Flot, which works exactly as expected in this case. It resizes to fit the size of its container rather than on window resize... problem is I like Morris charts much more than Flot.

I thought the original poster of this thread was talking about the same thing as I am, but the solution provided is only for window resize. Anyone else manage to get something like this working?

[jaminellis]

SVG is notoriously tricky on the resizing front. I'll have a dig and see if there is a way to scale from Raphael.

[guilbep]

Just for your information. I stopped using the redraw thingy. Because It was making Firefox halt.. badly. :p

[jhaenchen]

I'm using jQuery to show and hide the graphs. As you can see, the graph momentarily has no width before realizing its parent element has grown and resizing to fit it. Is there any way to change this behavior? It takes more than a second to adjust, and in the meantime is totally unusable.

[jhaenchen]

To clarify, you can achieve this result by using jQuery .show() and .hide() on the graph.

[johnny-vikrant]

Graph re-sizes when i minimize my window but stays in minimized sized even when i maximized the window. To make it fit to window i've to reload the browser every time. Any solutions?

[rpujakesuma]

Thanks @JonathanOlsen. +1

[yong0011]

Thanks a lot @JonathanOlsen +1
that's perfect.

[winstonfale]

TNXXXXXXXXXXXXXXXXXXXXXXXX ALOT 💃

[azhrhussain]

I achieve dynamic resizing using JQuery div resize.
Let suppose I have a div with 100% width and morris bar append in it
html:

<div id="myBar"></div>

Make a variable and all Morris chart initialization you required but make sure not to include the following properties while initializing Morris chart redraw: true and resize: true

var bar = Morris.Bar({......});

Here the jquery resize function magic

$('#myBar').resize(function () { bar.redraw(); });

Whenever DIV resize the Morris Chart automatically fit to it's parent DIV.

[danegraphics]

To prevent it changing the size of the parent div, set the svg size in css like so:
#chartDivID svg { height: 200px; width: 200px; }

[lgtmbro]

Hey humans,

NOT sure if this is relevant, but I'm using materialize css and I found that when the chart resizes, the svg height keeps growing :/ (could be PBKAC). However if this is an actual issue I found that the following jquery keeps the svg from growing++

$(document).ready(function() {
    $("#chartID").find("svg").css("maxHeight", $("#chartID").css("height"))
})

Peace ☮️