Chartist-js: bad chart height at first rendering

Created on 30 May 2015 · 5Comments · Source: gionkunz/chartist-js

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.

awaiting response question

Source

fzgharaei

Most helpful comment

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

gionkunz on 6 Jun 2015

👍2

All 5 comments

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

gionkunz on 6 Jun 2015

👍2

Hi, thanks for your response. actually I found a simpler solution, putting my chart in another div in directive template. But now I faces a new problem, I explained it in #1215. please have a look over there as well.
Thanks for your time and also thanks for great chart library!

fzgharaei on 15 Jun 2015