Home forums Report Bugs Graph not responsive when loaded as hidden

This topic contains 8 replies, has 4 voices, and was last updated by  Anjali 2 years, 2 months ago.

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

    NynjA
    Participant

    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 2 years, 8 months ago by  NynjA.
    #6095

    Sunil Urs
    Keymaster

    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

    NynjA
    Participant

    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 2 years, 8 months ago by  NynjA.
    #7040

    warria98
    Participant

    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

    Anjali
    Participant

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

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


    Anjali

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

    warria98
    Participant

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

    #7080

    Sunil Urs
    Keymaster

    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

    warria98
    Participant

    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

    Anjali
    Participant

    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.