How to resize the Morris Charts?

javascript jquery twitter-bootstrap morris.js
Riot Zeast Captain picture Riot Zeast Captain · Jun 15, 2016 · Viewed 11.3k times · Source

I'm resizing the page by clicking 'menu toggle button', but when am doing so the Morris charts are not resized, I tried to trigger it, but its not working. I added a line of code in my js $(window).trigger('resize'); but this dint worked. can any body help me? as I'm not aware of resize option in jQuery.

Thanks -Riot Zeast Captain

Answer

Azhar picture Azhar · Jul 29, 2016

html:

<div id="area-chart" class="col-sm-12"></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 which trigger when ever div resizes no need to trigger window resize.

$('#area-chart').resize(function () {
  bar.redraw();
});

Whenever DIV resize the Morris Chart automatically fit to it's parent DIV which is col-sm-6.

This solution give you the size of chart according to the parent div size.

You don't need to add click function also.

Related questions

How to open a Bootstrap modal window using jQuery?

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form. <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading"&…

Read More
Passing data to a bootstrap modal

I've got a couple of hyperlinks that each have an ID attached. When I click on this link, I want to open a modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), and pass this ID to the modal. I …

Read More
The data-toggle attributes in Twitter Bootstrap

What does data-toggle attributes do in Twitter Bootstrap? I couldn't find an answer in Bootstrap API. I have seen a similar question before as well, link. But it didn't help me much.

Read More