I am currently working with chart.js and have a setup that includes two pie charts and a bar chart that I would like to display in a single row. In order to achieve this layout where the bar chart is larger than the pie charts, I implemented the following solution.
To ensure that the two pie charts fit into a single column, I utilized the column-count property in CSS.
Below is the CSS code that I have implemented:
.container {
display: flex;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-bottom: 30px;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
align-self: stretch;
margin-right: 10px;
margin-left: 10px;
}
.container div {
flex: 1;
}
canvas {
max-width: 100%;
display: flex;
}
.pie {
column-count: 2;
max-height: 93%;
}
Additionally, here is the corresponding HTML structure:
<div class="container">
<div class="row">
<div class="pie">
<canvas baseChart [data]="pieFeeChartData" [type]="pieChartType"
[options]="pieFeeChartOptions">
</canvas>
<canvas baseChart [data]="pieFooChartData" [type]="pieChartType"
[options]="pieFooChartOptions">
</canvas>
</div>
<div class="column">
<canvas baseChart [data]="barBlahChartData"
[options]="barBlahChartOptions" [type]="barChartType">
</canvas>
</div>
</div>
</div>
Although setting max-height: 93% in the .pie class seems to provide a close approximation of the desired layout, it lacks precision and may result in inconsistent formatting on smaller window sizes. An ideal solution would be to avoid using hardcoded values. I have experimented with various flex settings, but I aim to maintain consistency in CSS styling across the project.
You can view a screenshot of the current layout without the max-height: 93% setting here.