Home forums Report Bugs Chart Width problem with Bootsrap Modal Popup

This topic contains 2 replies, has 2 voices, and was last updated by  Imi khan 1 week, 2 days ago.

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

    Imi khan
    Member

    Hey there, I am facing chart width problem with bootstrap modal popup. I did not set any width or height, but it’s seems, chart did not get full width of modal popup. I am attaching the image. please reply asap…
    Bug Picture

    #17295

    Indranil Deo
    Member

    @imi-khan,

    CanvasJS Chart automatically sets the width and height of the chart according to container’s dimensions. When the container’s dimension is not specified it takes up the default width & height(500px X 400px).

    You would have to set 100% width for the Chart Container.

    Also, in bootstrap, since the modal is not displayed initially, chart takes the default values. To solve this issue, you can render the chart when the shown.bs.modal event is fired.

    $('#chartModal').on('shown.bs.modal', function () {
            chart.render();
    });

    Please take a look at this jsfiddle.

    ___________
    Indranil Deo,
    Team CanvasJS

    #17301

    Imi khan
    Member

    Thank you so much… work very well…

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

You must be logged in to reply to this topic.