Home forums Report Bugs CanvasJs donut chart size is different in second slide of Bootstrap3 carousel

This topic contains 5 replies, has 4 voices, and was last updated by  Anjali 2 years, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #6995

    anoopchandran
    Participant

    This is more of an issue of bootstrap than Canvasjs.. The chart is rendering properly in first slide of the carousel..on second slide it is taking the default value of 500X400…until i open firebug…then it magically become alright. I’m assuming that a redraw/refresh happens on activating firebug, which makes the chart appear fine suddenly.
    How can i fix this issue? I’m trying to write a javascript function to force the canvas to redraw when carousel next button is clicked. Can anyone help me with this issue? Thank you.

    #6996

    Daniel Silva
    Participant

    You have to call chart.render() after each slide change.

    $('#myCarousel').carousel({
        interval: 2000
    });
    
    $('#myCarousel').bind('slid', function() {
        //get the chart object and use chart.render()
    });​
    • This reply was modified 2 years, 3 months ago by  Daniel Silva.
    #7026

    Anjali
    Participant

    Hi,

    You can calculate the height and width of Carousel DOM element and use these values as the height and width of Charts. By doing this canvas will render the chart with Carousel’s height and width instead of default (500*400). Here is an example.


    Anjali

    #7230

    vforvector
    Participant

    Hi there…I’ve updated the fiddle please check this out.
    http://jsfiddle.net/vforvector/jshLew2s/11/

    #7231

    vforvector
    Participant
    #7403

    Anjali
    Participant

    Hi,

    After calculating the height and width of Carousel DOM element, you are not setting these values as the height and width of Chart because of which it is rendering with default (500*400) width & height.

    You can check out this jsfiddle.

    Also please do not set CSS on canvas elements directly. Instead you should set styles for Chart Container.

    __
    Anjali

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

You must be logged in to reply to this topic.