Home Forums Report Bugs Graph not responsive when loaded as hidden

Graph not responsive when loaded as hidden

Viewing 9 posts - 1 through 9 (of 9 total)
  • #6093

    Hello,

    I have a bug that I’ve not been able to fix yet.

    I put the chartContainer div in a “toggle” div that is hidden on load of the page.
    When I show this div, the graph is not displaying as it should be : only 500px wide.
    It only displays as it should when I resize the browser window.

    I hope you understand my case.
    How can I fix this?

    Thank you in advance for your help.

    • This topic was modified 10 years ago by NynjA.
    #6095

    Once you toggle you can call chart.render() again and it’ll update its size. Please use the latest beta which contains this fix.


    Sunil Urs

    #6098

    Thanks for the quick answer. I’m still a beginner in js though…
    So how should I call the chart.render() from another js? Like this:?

    // Toggle box
    //##########################################
    $(document).ready(function(){
    $(‘.toggle-trigger’).click(function() {
    $(this).next().toggle(‘slow’);
    $(this).toggleClass(“active”);
    return false;
    chart.render();
    }).next().hide();
    });

    Cause it doesn’t seem to work… Even with the latest beta replaced.
    Thank you in advance!

    • This reply was modified 10 years ago by NynjA.
    #7040

    Hi NYnjA did you manage to solve this issue? I am having the exact same problem and I cannot fix it, I have the latest version also…

    #7066

    Hi,
    Call the chart.render() inside the callback function of toggle(). like:

    $(this).next().toggle("slow", function() {
        chart.render();
    });


    Anjali

    • This reply was modified 9 years, 6 months ago by Anjali.
    • This reply was modified 9 years, 6 months ago by Anjali.
    #7078

    will this also work with .animate() callback also?

    #7080

    Warria,

    It should. In case you face any problem with this please create a JSFiddle which reproduces the issue so that we can have a look.


    Sunil Urs

    #7083

    Thanks Sunil, I got this working I was defining chart inside a function so it didn’t have global scope, oops.

    Other than that this fixes it but it seems to “flick” into the correct size, not the prettiest. Do you think you will have a built in fix for this at some point? Thanks for the great work though, canvasjs is a great tool.

    #7091

    Hi,

    You avoid that flicker by setting width and height of chart to it’s container’s dimensions. By doing so you won’t have to use animation callback function. Here is an example.


    Anjali

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.