Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bad chart height at first rendering

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:5

github_iconTop GitHub Comments

gionkunzcommented, Jun 6, 2015

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() {
fzgharaeicommented, Jul 1, 2015

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bad chart size at first rendering · Issue #1215 · c3js/c3
Hi everyone, I've put my c3 chart in an angular directive, every thing was just fine when it was only the containing chart...
Read more >
javascript - Google Line Chart rendering as empty, but no errors ...
The chart is actually not rendering empty, it's just rendering to small. ... can either work with this by setting the size of...
Read more >
10 Good and Bad Examples of Data Visualization · Polymer
Bar charts are for showing the relationship between 1 categorical variable (e.g. color, car model, gender) against 1 numerical variable (height, ...
Read more >
Improving chart performance – amCharts 4 Documentation
This kind of rendering requires a lot more CPU power. If you have a lot of data points, consider disabling this feature: it...
Read more >
React Charts | KendoReact UI Library - Telerik
Beyond just rendering the charts like normal, the KendoReact Charts have built-in logic for handling resizing and responsive design. This includes features like ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found