How to set the graph size to a fix value ?

[gperrin]

I just upgraded chart js from 2 to 3, mainly using it for line charts, and I got a new problem with large datasets:
On each line chart, I want the chart to be displayed roughly the size of the screen, and beneath it add my legends.
To do so, I set the canvas height to the sreen size + X time legend size, X being th number of lines.
When X < 35, I have my chart and then the X legends beneath it without any issue.

But when X > 35, the graph start taking more and more space when X increase. I limit the user to X = 200, which give a graph totally unreadable as you have to scroll over 3 pages to see it, and most of the legends are pushed out of the canvas

Any ideas on how to set the graph max size and not only the canvas size ?

Thanks in advance

EDIT
Had to delete the images for privacy issues

[Udemology]

Hi @gperrin

Not sure if this is an option as there is no method that I know that could control the chartArea directly in Chart.js (im sure there is something somewhere). However, since you indicate 2 issues and both needs to be solved eventually.

1. Control of the 'chartArea' section
2. Clipped off legend items.

Would it perhaps be an option to hide the legend and make the legend a custom HTML legend outside of the canvas? (You can use generateLegend for that: https://youtu.be/eIy8J-YhanU) This would ensure all the items on the legend to be displayed. By taking out the legend from the canvas the canvas becomes only the 'chartArea' which you can control by maintainAspectRatio or set your own size by using a div container.

Not the answer you were looking for but perhaps an alternative for your issue.

[gperrin]

I'm gonna try that today. Looks like a bit of work but that is a good workaround the fact that I dn't know how to control the chartArea size

[gperrin]

I reproduced the legend quite easily and this works, thanks for the help !

[Udemology]

Happy to hear it worked out!