Chart.js: [BUG] charts are completely squashed on mobile

[jeffwillette]

Expected Behavior

That the chart resizes for mobile based on viewing area (there is a lower size bound to where the chart is at all viewable/useful)

Current Behavior

the chart squashes down until the chart area is too thin to be useful.

Steps to Reproduce (for bugs)

https://mapofcrime.com/maps/phoenix/about/ view this on mobile or chrome webmaster mobile view.

[etimberg]

This behaviour is currently as designed.

What you can try is to set maintainAspectRatio: false in the options. This will keep the height the same as the width changes. In the default configuration, Chart.js will have the canvas fill it's parent size. What you could do is use a CSS media query to increase the height on mobile so there is more room for the legend, etc.

[jeffwillette]

hmm ok thanks for the reply. I will play around the the maintainAspectRatio option..

I am using a css media query for mobile. When you say increase the height, do you mean increase the height of the containing div and let chartjs autosize the rest? or do you mean to manually set the height and width of the canvas? or something else?

[etimberg]

@deltaskelta I meant increase the height of the containing div.

[etimberg]

Closing as answered

[kirantpatil]

Hi,

I am using https://www.reportskit.co/examples/line which is using chart.js.

Is this issue same as what I am experiencing ?

Desktop screenshot

Mobile screenshot

Thanks.

[nciemniak]

The workaround I used for this issue was to set maintainAspectRatio in options to false (see documentation) and then add max-height: 500px (or whatever size you want your chart to be) to the css styling of the canvas element that was being used for the chart. For some reason, when I set maintainAspectRatio to false, the chart's height expands infinitely, hence the need to use the max-height styling.

In my case, this solution ended up locking in the size of the chart to 500px, which is not ideal, but not nearly as bad of an issue as having the chart completely squashed when viewing it on a mobile display.

Reference this stack overflow post for other possible workarounds.