为什么chart.js线图彼此重叠？

Question

我在StackOverflow上也看到了类似的问题，但是到目前为止，没有一个答案对我有帮助。

我在Web项目中使用chart.js，但是现在，当我想在同一容器中显示2个折线图时，它们会产生奇怪的现象，即使我调整了父容器或尝试用div包裹画布

下面是一些代码：

[...]
<!--the big white container-->
<div class="Card Fill" id="5da78c0de214b0020e86f53a">
    <div class="Details">
        <span>entradas:30</span>
        <span>duracion: 0:02</span>
    </div>
    <div class="ChartContainer">
        <div class="ChartWraper">
            <canvas id="tempGraph"></canvas>
        </div>
        <div class="ChartWraper">
            <canvas id="ppmGraph"></canvas>
        </div>
    </div>
</div>
[...]

function drawChart(canvas, datasetLabel, data, labels) {
    window[datasetLabel] = new Chart(
        document.getElementById(canvas),
        {
            type: 'line',
            data: {
                datasets: [
                    {
                        lineTension: 0.1,
                        label: datasetLabel,
                        fill: true,
                        data: data
                    }
                ],
                labels: labels
            },
            options: {
                scales: {
                    xAxes: [{
                        display: true
                    }]
                }
            }
        }
    );
}


//ask api for data array
window.onload = function () {
    let droneId = document.getElementsByClassName("Card")[0].id;
    axios.get(`/api/vuelos/data/${droneId}`)
        .then((response) => {
            responseData = response.data;
            let factorized = refractor(response.data); //separate the data from the drone into arrays

            drawChart("tempGraph", "temperatura", factorized.temp, factorized.labels);
            drawChart("ppmGraph", "particulas por millon", factorized.ppm, factorized.labels);
        })
        .catch((error) => {
            alert(error.message);
            console.log(error);
        });
}

.Card {
  position: relative; /* soo that i can relocate the options inside*/
  background: var(--background);
  padding: 30px;
  border-radius: 15px;
  margin: 10px;
  box-shadow: var(--ui-shawdow);
}
.Fill{
  width: 100%;
  height: 100%;
}
.Card > .Details {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-content: space-around;
}
.ChartContainer{
  display: flex;
  flex-direction: column;
  align-content: space-between;
  height: 50%;
}
.ChartWraper{
  height: 40%;
  width: 100%;
}
canvas{
  height: 40%;
}

我可能做错了什么？我曾尝试在CSS或HTML上进行更改，但似乎不起作用

我希望它看起来像这样，在没有卡溢出的情况下做出响应。