Bad chart size at first rendering
See original GitHub issueHi everyone, I’ve put my c3 chart in an angular directive, every thing was just fine when it was only the containing chart div:
<div class="chart-panel">
<div id="chart{{uniqueId}}"></div>
</div>
Then because of need to drill down into chart data and generating new chart I had to add back and forward buttons under the chart, chart width at first rendering gets out of hand, but it fixed when I put all the chart and buttons into a div.
Now I want to put the button on sides of the chart so I have my directive’s template like this :
<div class="col-md-12 chart-panel">
<div class="text-center">{{chartTitle}}</div>
<div class="row">
<div class="col-md-1">
<button class="btn btn-default" id="chartBackButton" ng-click="onBackClick()" disable>
<i class="glyphicon glyphicon-chevron-left"></i>
</button>
</div>
<div class="col-md-10">
<div id="chart{{uniqueId}}"></div>
</div>
<div class="col-md-1">
<button class="btn btn-default pull-right" id="chartForwardButton" ng-click="onForwardClick()" disable>
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
But at first rendring the width gets out of hand again. It get fixed after page resize. I want to know what happen on page resize & if I can set that in c3 chart so it would work fine from the beginning.
Issue Analytics
- State:
- Created 8 years ago
- Reactions:2
- Comments:8
Top Results From Across the Web
Chart renders incorrectly when browsing "back" to a page
When the Sharepoint page is first opened - the chart renders just fine. It also renders fine when the page is refreshed.
Read more >javascript - Google Line Chart rendering as empty, but no errors ...
is rendered it's rendered in the size of about 65x17pxs. ... So you can either work with this by setting the size of...
Read more >10 Good and Bad Examples of Data Visualization · Polymer
Bad Example #1: Presenting Qualitative Data. Not all data can be visualized into graphs or charts. For instance, data pertaining to employee ...
Read more >Rendering different Charts - FusionCharts
Your first map is ready. Render other Maps#. To reduce the size of the package FusionCharts comes with only two maps, i.e., the...
Read more >Improving chart performance – amCharts 4 Documentation
Once we want our chart to size itself to fit into container, ... orders of magnitude faster - both in initial rendering and...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Facing the same issue without angular aswell. Triggering a window resize fixes it but the transition is visible.
I found my bug, it’s not an async issue, it’s actually selecting a different element from element.parent.height(), so disregard my previous comments. This is fine!