Responsive in combination with bootstrap collapse

[reinvanleirsberghe]

When a chart is placed inside the collapse option of bootstrap with the responsive to true, it is not showing.

Only when you resize the screen, the chart pops up

[xaviermichel]

👍

[etimberg]

@reinvanleirsberghe Can you please create a JSbin showing this issue?

[thtg2000]

someone reach the solution for this problem?

[xaviermichel]

Hello,
After upgrading to Chart.js 1.0.2, the chart never appears (resizing screen has no effect).
Here is a test case : http://jsbin.com/jutuju/1/

[Cbruyere]

Is there any solution for this problem please ?

[bluesodium]

No real solution as yet. It's not really a bug though, as it is calculated using its container div, which has height of 0. I managed to get around it by having an invisible container (the same width as the container), that is always displayed. I can then edit the resize function to calculate based on this div. clunky but it works.

[Cbruyere]

Could you maybe give a example of your code ? it will be nice of you :)

[bluesodium]

snippet here...

#961 (comment)

[Cbruyere]

thx a lot for the snippet :) cya.

[rvaidya]

Thanks for the hack.

[edit]

So this didn't quite work as intended, it fully overrode the size of the chart which changes depending on labels, etc. that are added, so my chart was cut off. The only thing that worked was using setTimeout to delay the chart creation after the canvas tag is rendered, since it seems like there is some time required for the tag to have a "true" size.

Of course, this is not ideal at all, and the chart will fail to load on slow computers since this is a race between the canvas being ready and the timer starting. Not to mention the additional lag apparent to the user incurred by the timeout.

[gabrousseau26]

I think I found something. In Chart.JS (I'm with Version 1.0.2), modify (old are in comments):
Lines 41-42 :
//var width = this.width = computeDimension(context.canvas,'Width');
//var height = this.height = computeDimension(context.canvas,'Height');
var width = this.width = computeDimension(context.canvas, 'Width') === "auto" ? context.canvas.width : computeDimension(context.canvas, 'Width');
var height = this.height = computeDimension(context.canvas, 'Height') === "auto" ? context.canvas.height : computeDimension(context.canvas, 'Height');
Line 854 :
//newWidth = getMaximumWidth(this.chart.canvas),
newWidth = getMaximumWidth(this.chart.canvas) === 0 ? this.chart.canvas.width : getMaximumWidth(this.chart.canvas),

[etimberg]

The good news is that this has been fixed in version 2. We can back-port the fix to v1 if necessary since it should only involve the resize handler.

[JaimeStill]

Here's a Plnkr showing some of these issues working with bootstrap and angular. There's some disparity between the way this renders in Plunker vs. my ASP.NET MVC solution that integrates the same angular code. I'll outline some of the issues and details below:

• If the line-chart-demo directive is the active element in index.html, the Randomize Chart button has to be pressed before the chart will render, whereas it immediately renders in ASP.NET solution. Note that in IE, you have to launch the preview in a separate window for the chart to even render in the first place.
• If the layout directive is the active element in index.html, a chart rendered in the first shown tab will not render at all no matter what, whereas it will immediately render in ASP.NET solution.
• Charts in subsequent tabs will not render at all in either case.
• lineChart.js directive defines a renderChart function on the sharedScope object from the chartSvc.js service. The link function keeps track of the canvas, context, line chart object. Every time the renderChart function is called, the lineChart object is destroyed if it has been created before. Then, the lineChart object is reinitialized using the context of the canvas from the directive template.

[etimberg]

V2 has been released and this is fixed there. See https://jsfiddle.net/1cm1wo8t/

[proteus-aholt]

I just pulled in the latest version of Chart js (v2) by cloning the Repo, and this does not look to be fixed.

Chart within Bootstrap carousel is not getting correct height and width.

Ended up rolling back to old version and using @gabrousseau26's hack/fix.

[derekperkins]

@aholtventuretech: can you provide a fiddle showing the broken setup?

[fjacobs]

@derekperkins @aholtventuretech: it works fine for me in bootstrap carousel.

[etimberg]

Fiddle showing it working in bootstrap is: https://jsfiddle.net/cbybvww8/1/

[jewkesy]

Hitting this problem with v2.1.3, Bootstrap v3.3.6. I have 4 Polar Charts side-by-side in responsive containers. Not using a carousel, so will try to get a fiddle up and running

[mirraj2]

I'm still getting this problem.

[mbogochow]

This still occurs if maintainAspectRatio: false

[LordOfCorners]

@mbogochow If you know how tall you want it to be you can just set the height of the canvas manually after rendering the chart. Worked in my case.

chart.canvas.parentNode.style.height = '400px';

[anitbibin]

Another hacky fix that worked for me for the display none to block issue..
Instead of display: none put visibility: hidden and set height and width of container to 0.

[robinwilson16]

This still occurs if maintainAspectRatio: false

This does still appear to be a bug in the latest version still but setting maintainAspectRatio to true does fix it.
If you set the chart to hidden, load your data then display the element the chart doesn't render at all if the canvas for the chart is the only element inside the DIV. If you add some text then the chart appears underneath but then gradually grows indefinitely in height until it crashes your browser. The canvas is set for a width of 200px but this is ignored.

[SwordaDev]

Using vue-chartjs wrapper and having this exact same issue. Still not fixed.

Temporary fixed it by adding min-height: 400px on the canvas itself.
Seems like the default height value cannot be applied on the canvas if its direct parent does not have a proper height.

[QuadTriangle]

Temporary fixed it by adding min-height: 400px on the canvas itself.

It works. confirm.