Pie Charts taking up entire row/container in flexbox

[jeb29]

I’m trying to make CanvasJS pie charts go side-by-side in a flexbox container when using ReactJS. I am unfortunately unable to re-create the scenario in JFiddle (I couldn’t figure out how to use ReactJS in it), but I have this screenshot of the result and the CSS styling

Here is the CSS styling. All of the graphs overlapped on the same row before I added the “flex-flow: wrap;” line

Here is how the charts are being displayed:

As you can see, the chart takes up the entire row/flexbox container even though it doesn’t have to (the pie chart is not very large).

Here is how I’m creating the pie charts (all of them are identical in style):

I did not modify the width component but I am completely lost on why the CanvasJS chart grows to the entire row. Any help would be greatly appreciated

[Manoj Mohan]

@jeb29,

Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or OneDrive along with sample data so that we can run it locally at our end, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[jeb29]

Sure! Which email address should I share it with? (for Google Drive)

[Manoj Mohan]

@jeb29,

You can generate a shareable link and post it in this thread.

—-
Manoj Mohan
Team CanvasJS

[jeb29]

@manoj-mohan,

Here is the link: https://drive.google.com/file/d/1UNJpgQCZd8frgxxgWsQARR5tveb9Oigv/view?usp=sharing

I’ve included instructions on how to run it in the README. Thank you!!!

[Manoj Mohan]

@jeb29,

Passing the width value as a property of containerProps should work fine in your case. Please take a look at this updated sample project for the same.

—-
Manoj Mohan
Team CanvasJS

[jeb29]

@manoj-mohan

I’m having trouble running the updated sample project. When I attempt to run it with npm start, I get

“/Users/…/website/website/node_modules/.bin/webpack-dev-server: line 1: ../webpack-dev-server/bin/webpack-dev-server.js: No such file or directory”

When I pass the width value as a property of containerProps (in the original sample project), it does shrink the CanvasJS chart to half of each row, but it still does not wrap two charts onto the same row.

I noticed in the App.css file, you wrote “/* Please set the flexbox properties to the div in which chart-containers are present */”

I did set flexbox properties to the div that contains canvasjs-react-chart-container-* divs but it didn’t wrap them. I’m not sure where else to add the “chart” css properties

https://imgur.com/pYxjTR4

Thank you again for your help so far!

[Manoj Mohan]

@jeb29,

In the updated sample shared, flexbox properties are set to the div (.chart) which contains all the chart. This seems to be working fine, i.e. charts are positioned next to each other.

If you are still facing the issue, kindly brief us further about the issue you are facing so that we can help you out?

—-
Manoj Mohan
Team CanvasJS

[jeb29]

It works now. Thank you so much for your help!!! :)