Chart is not rendered in hidden elements
See original GitHub issueHello,
a chart is not rendered correctly into hidden elements. My use case would be a tab panel. How can I fix that? Here’s a minimal test case:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<style>
.wrapper {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#hidden {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
This one is displayed right away
<div class="ct-chart ct-chart-1"></div>
</div>
<div class="wrapper" id="hidden">
This one appears later, and doesn't display the chart
<div class="ct-chart ct-chart-2"></div>
</div>
<script>
new Chartist.Bar('.ct-chart-1', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8]
]
});
new Chartist.Bar('.ct-chart-2', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8]
]
});
setTimeout(function() {
document.getElementById('hidden').id = "display"
}, 2000);
</script>
</html>
Issue Analytics
- State:
- Created 9 years ago
- Comments:6
Top Results From Across the Web
charts disappear if rendered in hidden divs - Stack Overflow
I haven't used Chart.js, but a quick glance at the code suggests that it's querying the DOM to get height and width for...
Read more >ChartJS is not rendered in a hidden DOM element
This means that you need to render a chart only when the container is visible. Use the render method for this.
Read more >Highchart does not render on hidden elements
Hi, I want to render a chart on a hidden element so the user can later view it when he opens that specific...
Read more >Charts rendered in hidden DIVs will not display until browser ...
I have some the chart.js graphs being defined inside a hidden container; therefore, the charts have no container width or height when it...
Read more >Chart loaded in hidden element is not showing correctly after ...
I have hidden the element with id="hidden". Try now and find this element in the DOM (F12) and remove the display:none style then...
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
Hi @rolandschuetz , Chartist needs some client rect information in order to render correctly. This is not provided for DOM elements underneath hidden DOM elements. If you have initialized charts siting in hidden parts of your web page, you need to trigger an update after un-hiding this content:
document.querySelector('.ct-chart-2').__chartist__.update();
I’ve posted your example with this code into JSBin http://jsbin.com/towaz/1/edit
I’m getting the right size via DOM traversal and and update on resize. Thanks for pointing me to the right place!