3

I have founds lots of answers for ways to get chart.js plots to fill the horizontal space (using option responsive = true), but they only offer one of two behaviours for the vertical space:

  • Either maintainAspectRatio is true and the vertical size adjusts automatically to preserve the aspect ratio when the width changes.
  • Or maintainAspectRatio is false and the vertical size is fixed.

Is there a way to create plots that will fill the available vertical space?

I know I can use a flex layout to create a div that will fill the vertical space, so I tried to use that for my charts either directly:

<div syle="display: flex; flex-direction: column;">
   <div id="header">Foo</div>
   <canvas id="plot" style="flex-grow: 1"></canvas>
</div>

or by wrapping the canvas in a flex div:

<div syle="display: flex; flex-direction: column;">
   <div id="header">Foo</div>
   <div style="flex-grow: 1">
      <canvas id="plot"></canvas>
   </div>
</div>

always with responsive = true, but the plot never fills the vertical space.

Jmb
  • 18,893
  • 2
  • 28
  • 55
  • I have this same question. Did you manage to find a workaround? – JPM Jun 29 '21 at 10:02
  • @JPM Not really, I wound up using a fixed aspect ratio and letting the width adjust automatically. – Jmb Jun 29 '21 at 12:19

0 Answers0