Home forums Report Bugs Rendering messed up when chart is loaded hidden

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #14288


    If i have a chart in a div which is hidden with css when the page loads, the rendering is totally messed up if I decide to toggle the div.

    All i do is to have this:

    .myChart { display: none }

    Then .myChart is added to the actual div containing the chart. If i then have a jQuery function running:


    The whole render of the chart is very strange. Maybe there’s a workaround?



    Since the Container is not displayed initially, chart takes the default values for width and height.
    To show the chart with given height and width of the container, just re-render the chart once the chart container is displayed. Here is a jsFiddle for same.

    You can also take a look at following examples if you’re working on Bootstrap:
    Example 1,
    Example 2
    Example 3

    Bivek Singh


    True, it all makes sense that width/height calculation are incorrect when not shown.

    Thanks for your jsFiddle examples! Very helpful!

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

You must be logged in to reply to this topic.