When using bar/line chart, get a 1px height

[efecher]

When I create a pie/donut chart it appears to render correctly, but when I use the markup recommended for a line or bar chart, the chart renders squished into a 1px height, and only after repeatedly calling Pizza.init() do I get the height to expand.

I'm including Jquery, dependecies.js, snap.svg.js, and pizza.min.js along with foundation's CSS and pizza.css, and calling Pizza.init() on a document.ready

[crookm]

I had this problem, but I saw that the pizza playground page initialized the script like this:

setTimeout(function () {
    Pizza.init();
    $(document).foundation();
    $(window).trigger('resize');
}, 300);

Seems to work fine for me now. Would have saved me a lot of time if this was in the docs.

[efecher]

adding this code does work, however the chart show up cut off a bit. I still need to make multiple calls to Pizza.init() or $(window).trigger('resize'); to get the chart to grow enough so nothing's cut off.

[crookm]

Could that be because of other elements being initialised or animated before the charts? Try it on a empty page and see what you get. Also maybe try with a longer delay (maybe change 300 to 600ms?)

Although side note, I wouldn't recommend this library. After managing to get it working fine myself, I found that the axis of graphs aren't ever accurate. I switched to Chart.js - you'll find it's a nice alternative, it works fine on responsive websites.