bad chart height at first rendering

Hi! I’m trying to use chartist in a customized reusable directive for my project. It worked almost perfectly when the chart description was within main code, but some flaws appeared when I moved them into directive. chartist directive will go into a panel, which got the ‘auto’ parameter for height and width. It works fine to set chart’s width by document.getElementById("parentPanelId").offsetWidth but when use same value for chart’s height it returns 0. when the window resized the problem solved, and every element happily positioning in right places. I want to do what happens to height in window resizing at the beginning! Do you have any suggestions? Also, I don’t want to use a fixed pixel value for height cause my site should be very responsive. PS. I already have read the #153 issue and it didn’t help me.

[gionkunz]

Hey there. I’m not sure if I fully understand your situation. Chartist needs to have a valid visual container at the time when it renders the chart. This means that getBoundingClientRect() on the element where the chart is rendered needs to return a width and height other than 0.

If you’re using the intrinsic ratio containers of chartist ct-golden-section, ct-square etc. then your chart should be fine if the width of the containing element of the container is okay during the drawing.

If your container is hidden with display: none or max-height: 0 or affected by anything else that will cause either width or height to be something other than you expect in the final layout state, then you need to do an update on Chartist once your container is ready.

For example if you have hidden tabs that contain charts, you should update them after the tab got activated. This is an example with a fictive tab plugin with jQuery:

$('.my-tab').on('activated', function() {
  $(this).find('.ct-chart').each(function() {
    this.__chartist__.update();
  });
});

[fzgharaei]

Actually, it turns out it was kinda my Angular’s fault back then. Thanks again for your time.