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

Question

I have this graph with scroll in the x axis. (chartjs version 2.7.2)

At the end part of the code, where the data is added, you can choose how many records to add:

addData(5, chartTest);

If I add more records the graph goes bigger in the Y axis. I want the data to grow longer in the X axis along with the scroll, but keep the same height. I tried hardcoding heights everywere the canvas is manipulated, but did not get it to work. My ideal would be once the Y axis scale is fixed, to be able to introduce datasets with variable number of records and keep the graph size and scale in Y axis, making the X axis scroll bigger (meaning longer) if the dataset is bigger and viceversa.

Edit:

I also tried to set parameters to the css classes with the purpose of obtaining the Y axis aspect ratio constraint I am after. Seems this could be achieved with the corresponding arragment of the canvas aspect-ratio

In case in could make any difference, my graph is wrapped in a div element with this css class:

.mainBlank
{
    background-color: white;
    width: 100%;
    min-height: 100vh;
    max-height: 100%;
}

Edit2:

Using this html:

        <div style="width: 100%; overflow-x: auto; overflow-y: hidden">
            <div id="canvasParent" style="width: 2000px; height: 300px">
                <canvas id="chart1" height="300" width="0"></canvas>
            </div>
        </div>

And setting the width in the client when data changes:

        const newWidth = (chart.data.datasets[0].data.length * 30).toString() + "px";
        $('#canvasParent').css({ width : newWidth});

I achieve the desired effect. However I dont understand why in the fiddle's example the chart height changes.

Manoj · Accepted Answer · 2021-09-14T22:56:06.837

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,
  }
});

edited Sep 14 '21 at 22:56

answered Sep 14 '21 at 13:08

Manoj

176
4

thanks for your answer. You can check in the question fiddle link itself itself that the `maintainAspectRatio: false` is set, and that only the parent's width is modified when the data is added with `var newwidth = $('.chartAreaWrapper2').width() + 60;` . That is the main point of the question, that the height gets modified even the `maintainAspectRatio` is set to false when the width is modified, because the aspect ration is being mantained even when the option is set to false. – rustyBucketBay Sep 14 '21 at 15:32
it can also be checked that even if the tags height is set and fixed, if more data is added at the line `addData(5, chartTest);` a scroll appears because the graph gets bigger. So even if the parent height is fixed, the aspect ratio of the chart gets changed also. Check fiddle link in the question to play around :) – rustyBucketBay Sep 14 '21 at 15:37
Change **maintainAspectRatio** to false in **options**, in fiddle it's set to **false** but not in options – Manoj Sep 14 '21 at 22:55

score 0 · Answer 2 · answered Sep 14 '21 at 16:03

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>

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

2 Answers2