I am working on a simple Bootstrap document with 2 rows. The first row has a variable number of columns that overflow horizontally, and the second row contains a chart that needs to be responsive to match the number of columns in the top row.
It appears that ChartJS uses the dimensions of the parent div to ensure responsiveness, but I am struggling to make the parent (second row) have the same width as the first row. Any suggestions would be greatly appreciated. Thank you!
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: ['', '', '', '', '', '', '', '', ''],
datasets: [{
label: "foo",
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
fill: false,
tension: 0.3,
datalabels: {
align: "bottom",
offset: 10,
},
},
{
label: "bar",
data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
tension: 0.3,
fill: "-1",
backgroundColor: "rgba(255,193,8,0.5)",
},
],
},
});.topParent {
overflow-x: scroll;
border: 1px solid red;
}
.container {
border: 1px solid blue;
}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>
<div class='topParent'>
<div class="container">
<div class="row d-flex flex-nowrap">
<div class="col col-3">
1 of 7
</div>
<div class="col col-3">
2 of 7
</div>
<div class="col col-3">
3 of 7
</div>
<div class="col col-3">
4 of 7
</div>
<div class="col col-3">
5 of 7
</div>
<div class="col col-3">
6 of 7
</div>
<div class="col col-3">
7 of 7
</div>
</div>
<div class="row">
<div class="col">
<canvas id='myChart' height='100px'></canvas>
</div>
</div>
</div>
</div>