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

CanvasJs donut chart size is different in second slide of Bootstrap3 carousel

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

    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

    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 10 years, 1 month ago by Daniel Silva.
    #7026

    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

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

    #7231
    #7403

    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.