title: How to set responsive width and height of canvas?
body: <p>When I use CSS in the container holding the canvas, I get the desired height and width. But when I minimize it, it is not responsive.</p>
  
  <pre><code>.lineGraph{
      height: 100%;
      width: 52%;
      background-color: white;
  
  }
  </code></pre>
  
  <p><strong><em>Desired size:</em></strong>
  <a href="https://i.stack.imgur.com/r8UUU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r8UUU.png" alt="enter image description here"></a></p>
  
  <p><strong><em>When minimized:</em></strong></p>
  
  <p><a href="https://i.stack.imgur.com/zprnT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zprnT.png" alt="enter image description here"></a></p>
  
  <p>But when I put the CSS on the canvas itself, it becomes responsive when minimized. But I do not get the desired size of the chart when it is maximized.</p>
  
  <pre><code>#lineChart{
      height: 100%;
      width: 52%;
      background-color: white;
  
  }
  </code></pre>
  
  <p><strong><em>When maximized:</em></strong>
  <a href="https://i.stack.imgur.com/t5ef7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t5ef7.png" alt="enter image description here"></a></p>
  
  <p><strong>*Responsive when minimized: *</strong></p>
  
  <p><a href="https://i.stack.imgur.com/MmUwW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MmUwW.png" alt="enter image description here"></a></p>
  
  <p>How can I get the desired size when maximized but get a responsive output when it is minimized?</p>