Place two canvases side by side in a div

Question

I have two canvases using chart.js that are stacking vertically, when I want them to be side by side

<div style="width:30%;" class="row">
    <div class="my-4 col"><canvas id="costChart"></canvas></div>
    <div class="my-4 col"><canvas id="usersChart"></canvas></div>
</div>

Changing the width to a small number, and changing the col-x size doesn't get them to move into the same row. Any ideas?

score 2 · Answer 1 · answered Sep 30 '21 at 19:07

2

canvas{
    border:1px solid red;   
}
.row{
    display: flex       
}

<div style="width:30%;" class="row">
    <div class="my-4 col"><canvas id="costChart"></canvas></div>
    <div class="my-4 col"><canvas id="usersChart"></canvas></div>
</div>

answered Sep 30 '21 at 19:07

Azu

1,494
2
6
11

unfortunately that did not help :/ – Seltonu Sep 30 '21 at 19:16
What's wrong? I suppose the problem is that your `row` is too narrow with `width30%` and the second canvas goes down. – Azu Sep 30 '21 at 19:18

Place two canvases side by side in a div

1 Answers1