CODEWITHSUNDEEP
htmlcsshighchartssizedisplay
Zhihar
Zhihar

Reputation: 1428

"display: none" with highcharts - incorrect size

How to force to work correctly highcharts with display:none style. If initially the chart was invisible (display: none) after it becomes visible (display: block) -its size is set incorrect.

https://jsfiddle.net/0we2u4qgexample of incorrect chart's size

How to fix it?

    <!DOCTYPE HTML>

<html lang = "ru">

<head>
    <meta charset = "utf-8">

    <meta http-equiv = "X-UA-Compatible" content = "IE=edge" />

    <script src = "http://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src = "http://code.highcharts.com/highcharts.js"></script>
    <script src = "http://code.highcharts.com/modules/exporting.js"></script>

    <style>     
        .info {
            position:           absolute;
            left:               50%;
            top:                50%;

            color:              #f0f0f0;
            font-weight:        700;
            font-size:          24px;
            font-family:        'calibri';
        }

        .chart {
            display:            none;

            position:           absolute;
            left:               50px;
            top:                50px;

            width:              200px;
            height:             200px;

            margin:             0px;
            padding:            0px;

            border:             2px solid #bb0000;
        }

        .chart .container {
            width:              100%;
            height:             100%;

            background-color:   #bbbb00;
        }
    </style>

</head>

<body>
    <div class = "info">CLICK ANYWHERE</div>
    <div class = "chart"><div class = "container"></div></div>
<script>

(function ($)
{
    $('.container').highcharts({
        xAxis: {
            categories:     [10, 20, 30, 40, 50,],
        },
        plotOptions: {
            series: {
                animation:      false
            },
        },
        series: [
        {
            type:           'column',
            data:           [1, 2, 3, 4, 5,],
        },
        {
            type:           'column',
            data:           [5, 4, 3, 2, 1,],
        },
        ]
    });

    $(window).click(function(){
        $('.info').hide();
        $('.chart').show();
    });

}(jQuery));

</script>

</body>

</html>

Upvotes: 3

Views: 2966

Answers (2)

Kacper Madej
Kacper Madej

Reputation: 7886

It is possible to call chart.reflow() after .show(), so your chart will adjust to the size of its container.

Example: https://jsfiddle.net/0we2u4qg/8/

...
$('.info').click(function() {
  $('.info').hide();
  $('.chart').show();
  $('#container').highcharts().reflow(); //added call
});

Upvotes: 4

arslion
arslion

Reputation: 440

Add this function in javascript:

$(function() {
    $('.chart')
        .hide();
});

and use display: block; in css.

Upvotes: 1

Related Questions