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 8 months, 1 week ago.

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

    gregoff
    Member

    Hi,

    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:

    <style>
    .myChart { display: none }
    </style>

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

    $(‘myChart’).toggle();

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

    #14292

    Bivek Singh
    Moderator

    @gregoff

    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

    #14306

    gregoff
    Member

    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.