react charts render outside container

[mike]

Hi,

I’m trying out canvasjs for a react app. I just used the example code for the Donut Chart, but it renders outside the containing div. I submitted the issue through chat and they advised I should post the question here with a sample project.

Here’s the link:
https://drive.google.com/drive/folders/1UPYzItWF6fXiBCTkUnGbMlty2yzojF_f?usp=sharing

Thanks much

[Vishwas R]

@mike,

Can you kindly give permission for the shared file so that we can download it, run it locally to understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[mike]

Sorry. Should be accessible now.

[Vishwas R]

@mike,

By default Chart takes the size of its container, if set. IF the size of the container is not set, chart takes default height and width because of which it overflows the parent’s height. In case of React wrapper, you can set the height and width of the chart-container by passing it as containerProps. Please take a look at this demo for an example on setting width, height and border for chart-container.

If you are still facing the issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive. Alternately you can create sample project in CodeSandbox and share it with us so that we can understand the scenario better and help you resolve.

—
Vishwas R
Team CanvasJS