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.

Chart is not rendered in hidden elements

See original GitHub issue

Hello,

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 GitHub Comments

2reactions

gionkunzcommented, Jan 29, 2015

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

0reactions

rolandschuetzcommented, Jan 29, 2015

I’m getting the right size via DOM traversal and and update on resize. Thanks for pointing me to the right place!