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

• August 27, 2014 at 1:35 pm #6995
  
  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.

  August 27, 2014 at 11:00 pm #6996
  
  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.
  September 1, 2014 at 7:12 pm #7026
  
  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

  October 20, 2014 at 2:22 pm #7230
  
  vforvector

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

  October 20, 2014 at 2:33 pm #7231
  
  vforvector

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

  October 28, 2014 at 7:21 pm #7403
  
  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