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

[anoopchandran]

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.

[Daniel Silva]

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, 2 months ago by Daniel Silva.

[Anjali]

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

[vforvector]

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

[vforvector]

http://jsfiddle.net/vforvector/jshLew2s/14/

[Anjali]

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