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

This topic contains 2 replies, has 2 voices, and was last updated by  gregoff 2 years ago.

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?


    Bivek Singh


    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.