[Chartjs]-Maintain Y axis scale in graph with scroll in the X axis when the dataset grows bigger. Aspect-ratio problem

by

1👍

✅

This question has already been answered here >
https://stackoverflow.com/a/43658507
by numediaweb

If you disable the maintain aspect ratio in options then it uses the available height:

var chart = new Chart('blabla', {
  type: 'bar',
  data: {},
  options: {
    maintainAspectRatio: false,
  }
});

0👍

Seems that defining an initial width and height for the canvas, so defining an aspect ratio for it (with <canvas id="chart-Test" height="300" width="1200"></canvas>) involves that if the parent aspect ratio changes, that gets propagated down to the children.
Meaning that changing the width of the chartAreaWrapper2 element, the change propagates to the children so as to maintain the corresponding aspect ratio variation for that width change, so the height increase takes place along with the width increase. Setting the initial width to 0 solves the issue. I guess that as there is not an aspect ratio defined for the canvas, then the witdth changes do not involve an aspect ratio maintenance when the width change is propagated down from the parent.

So changing the <canvas id="chart-Test" height="300" width="1200"></canvas> by <canvas id="chart-Test" height="300" width="0"></canvas> fixes and explains the problem.

Whole correct html below, that can be pasted in the fiddle so that after lots of data is added in the addData(500, chartTest); the desired effect of height maintenance is obtained.

Any further explanation or points I could be missing are welcome.

<div class="chartWrapper">
  <div class="chartAreaWrapper">
  <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="300" width="0"></canvas>
  </div>
  </div>
  <canvas id="axis-Test" height="300" width="0"></canvas>
</div>

Leave a comment