CanvasJS charts take up entire row when using flexbox - css

Question

I am currently using CanvasJS for pie charts in a project done in ReactJS. When a search for a particular person is done, I render 4 pie charts displaying information. I would like to render the pie charts side-by-side (as the space allows) over multiple rows using Flexbox.
Currently, when the pie charts render, each CanvasJSChart takes up the entire width of the row. In the picture below, you can see that although each pie chart takes up ~1/3 of of the table (the "Trial Version" and "Canvasjs.com" are not fixed in position relative to the pie chart and can move closer to it, depending on the size of the container), the container is the width of the row. I would ideally like each row to contain 2 pie charts (but not fixed to allow the application to work better on small screens).
This is my CSS section.
.container {
display:flex;
flex-wrap: row wrap;
}
When I did not have the flex-wrap: row wrap; line, the charts would individually take up less space and all remain on the same row:
So when I do try to have the charts wrap around, I'm not sure why the size of the container changes to the entire row. Below is my code that renders the charts (in a component named Accuracy when I search a name:
class Contestant extends Component{
constructor(props){
super(props)
}
render(){
var name = this.props.data[0];
var data = this.props.data[1];
let fjText = null
let fj = null
if (data.FJCorrect+data.FJIncorrect>0){
fj = <Accuracy numberCorrect={data.FJCorrect} numberIncorrect={data.FJIncorrect}
overallAccuracy = {data.FJAccuracy}/>
}
let tiebreak = null
let tiebreakText = null
if (data.TiebreakCorrect+data.TiebreakIncorrect>0){
tiebreak = <Accuracy numberCorrect={data.TiebreakCorrect}
numberIncorrect={data.TiebreakIncorrect}overallAccuracy = {data.TiebreakAccuracy} />
}
return(
<div className = "container" >
<Accuracy numberCorrect={data.numberCorrect} numberIncorrect={data.numberIncorrect}
overallAccuracy = {data.overallAccuracy}/>
<Accuracy numberCorrect={data.JCorrect} numberIncorrect={data.JIncorrect}
overallAccuracy = {data.JAccuracy}/>
<Accuracy numberCorrect={data.DJCorrect} numberIncorrect={data.DJIncorrect}
overallAccuracy = {data.DJAccuracy}/>
{fj}
{tiebreak}
</div>
)
}
}
export default Contestant
and below is my code that renders a Contestant component:
class Search extends Component{
constructor(){
super()
this.state = {search: "",
isLoading: true,
result: "",
searchType: null
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleSearch = this.handleSearch.bind(this);
}
handleSearch(searchStr){
//Takes in text and finds data of corresponding person
}
handleChange(event){
//In case someone is searching for a new term, we have to reset search query type
if (this.state.searchType !== null){
this.setState({isLoading: true})
}
this.setState({search: event.target.value});
}
handleSubmit() {
this.setState({isLoading: false, result: this.handleSearch(this.state.search)})
}
render(){
return(
<div>
<input type="text" value={this.state.search} onChange={this.handleChange} placeholder={...} />
<button type="submit" onClick={this.handleSubmit}>Search</button>
{this.state.result.length === 0 ? null: <Contestant data={this.state.result}/>}
</div>
)
}
}
export default Search
My CanvasJS pie chart has the default settings as on the linked website (with only data points changed), so I'm not sure why the size of the charts change depending on whether I wrap my Flexbox cells.
class Accuracy extends Component{
constructor(props){
super(props)
}
render(){
var correctAccuracy = ((this.props.overallAccuracy).toFixed(2)).toString()
var incorrectAccuracy = ((100-this.props.overallAccuracy).toFixed(2)).toString()
var options = {
animationEnabled: false,
animationEnabled: true,
animationDuration: 500,
backgroundColor: "#F0F8FF",
height: 260,
data: [{
type: "pie",
startAngle: 300,
toolTipContent: "{accuracy}%",
indexLabelFontSize: 16,
indexLabel: "{label}:{y}",
dataPoints: [
{ y: this.props.numberCorrect, label: "Correct", accuracy: correctAccuracy },
{ y: this.props.numberIncorrect, label: "Incorrect", accuracy: incorrectAccuracy},
]
}]
}
return (
<CanvasJSChart options = {options}/>
)
}
}
export default Accuracy
Any help would be greatly appreciated! I've been stuck on this for a couple of days

Answer 1

From the first screencap, it seems like your problem is that the width of your pie chart containers is set to 100%. This means that each container will be 100% of its parent--in this case the .container div. Your CSS should look like this:
.container {
display: flex;
flex-wrap: row-wrap;
}
.piechart-container {
width:50%;
}
And of course you need to add the "piechart-container" classname to you piechart container divs. I didn't try this out so let me know if it works. You may have to set the width to be slightly less than 50% or change the max-width property as well. Instead of width:50% you could do flex:0 0 50% which is a flexbox item property meaning "set an initial width of 50% and don't allow any growing or shrinking."
Edit: just now seeing that you want some flexibility. You'd probably be better off setting the container widths in terms of pixels instead of percentages so that when the screen gets small enough they overflow to be one chart per row. I would recommend looking up "media queries" and setting the CSS so that if the screen width goes below a certain number, a different set of attributes takes place (i.e. smaller charts, different wrapping behavior)