You must be logged in to post your query.
Home › Forums › Chart Support › Pie Charts taking up entire row/container in flexbox
Tagged: flexbox, pie, reactjs
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
@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
Sure! Which email address should I share it with? (for Google Drive)
You can generate a shareable link and post it in this thread.
@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!!!
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
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!
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?
It works now. Thank you so much for your help!!! :)
You must be logged in to reply to this topic. Login/Register