Contain chart to 50% page width?

[CMayo]

This will turn out to be a CSS problem I imagine, but I’m placing a chart in a floating 50% width div, but Canvasjs still seems to think it’s being rendered on a full page. In the attached image, note the placement of the canvasjs watermark (full-page center) and the datapoint tooltip superimposed over the left-most div.

Fiddle (no watermark but check the placement of the datapoint tooltip): https://jsfiddle.net/qgf8tzr4/2/

What am I missing?

[Manoj Mohan]

@cmayo,

The above issue is happening due to combination of float and absolute positioning of dom elements. You can check this StackOverflow thread for more information about the issue. In order to overcome this issue in your scenario, you can specify float as left or right for chart container and use clearfix hack for the parent element to handle the difference in height of floated elements. You can check this page for more information about the clearfix hack for handling float elements. Please take a look at this updated JSFiddle for an example on the same.

—-
Manoj Mohan
Team CanvasJS

[CMayo]

Thank you very much! That fixed it!