title: why are chart.js line graphs overlapping each other?
body: <p>I have seen similar questions on StackOverflow, but none of the answers have helped me so far.</p>
  
  <p>I am using chart.js in my web project, but now, when I want to show 2 line graphs in the same container they do weird stuff, even if I adjust the parent container or try to wrap the canvas with a div.</p>
  
  <p><img src="https://i.stack.imgur.com/3rYLi.jpg" width="550" height="400"></p>
  
  <p>here is some of the code:</p>
  
  <pre class="lang-html prettyprint-override"><code>[...]
  &lt;!--the big white container--&gt;
  &lt;div class="Card Fill" id="5da78c0de214b0020e86f53a"&gt;
      &lt;div class="Details"&gt;
          &lt;span&gt;entradas:30&lt;/span&gt;
          &lt;span&gt;duracion: 0:02&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="ChartContainer"&gt;
          &lt;div class="ChartWraper"&gt;
              &lt;canvas id="tempGraph"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="ChartWraper"&gt;
              &lt;canvas id="ppmGraph"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  [...]
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>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) =&gt; {
              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) =&gt; {
              alert(error.message);
              console.log(error);
          });
  }
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.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 &gt; .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%;
  }
  </code></pre>
  
  <p>What may I be doing wrong? I have tried changing things at the CSS or the Html but does not seem to work</p>
  
  <p>I want it to look moething like this, responsive withouth overflow out of the card.
  <img src="https://lh6.googleusercontent.com/AwOj3waawn97BZHGa-aFYesngXKni0pr95jPKAliyShwA3mXtYYTLoUb6TcKKOMYc9JghmVTnh5ai3KJA5A=w1920-h985-rw" width="550" height="400"></p>