Multiple charts in HTML table overlapping

[bsoft]

When charts are in a table and only percentages are applied and not fixed height and width then the charts overlap.

https://jsfiddle.net/u0zb1haf/4/

[Indranil]

@brandtbsoft-co-za,

Since the chart height is set to 100%, it will take the height relative to the parent container whose height has also not been set to a pixel value. Setting the height of the parent container in pixel should work fine in this case. Please take a look at this updated JSFiddle.

___________
Indranil Deo
Team CanvasJS

[bsoft]

This means then that one cannot have a single interface for any size device. If one must have fixed height you would be scrolling like mad on smaller devices.
This works for a single chart on a page/view but as soon as you add a second or third chart they overlay. Is there no way around this?

[bsoft]

BTW. On your JSFiddle example your two charts in row two are also overlapping even with the fixed height.

[Indranil]

@brandtbsoft-co-za,

Since the cell width of the given column is varying in your JSFiddle, adding a colspan should work fine in your case. Please take a look at this tutorial for more information on colspan. Also, please take a look at this updated JSFiddle.

___________
Indranil Deo
Team CanvasJS