Vue-chartjs: Defaults for width and height breaks aspect ratio

Created on 8 Apr 2019  Â·  3Comments  Â·  Source: apertureless/vue-chartjs

Expected Behavior

Not specifying a width or height should allow relying on responsive and aspectRatio to be respected.

Actual Behavior

The defaults of 400 for height and width means that aspectRatio has no effect when set via options, it is always 400 / 400 = 1. Manually setting width and height to null fixes the issue.

Environment

  • vue.js version: 2.5.17
  • vue-chart.js version: 3.4.2
  • yarn version: 1.15.2
improvement âš¡ breaking change

Most helpful comment

Setting the height and width props to null did the trick. Hope to see this fix for this merged soon.

All 3 comments

Hi @jacobmischka

thanks for the issue and the PR. I am super sorry for the late reply. However, I kind of missed this issue.

I will need some time to test the changes. I think chart.js (recently) changed some of their defaults and improved the responsive behaviour of the charts.

As far as I remember, you literally had to define the width and height of the canvas to be rendered properly.

That is the reason why the defaults are set, so people could use it "out of the box".

I will check how it will behave without the defaults set. And more importantly how the regression is. Because, I guess removing the defaults, will end up in a lot of breaking charts.

Setting the height and width props to null did the trick. Hope to see this fix for this merged soon.

This should be mentioned atleast on the documentation, I spent hours and hours trying to get aspect ratio to work, setting width and height to null did fix the issue. BTW, @apertureless and everyone who worked on this project, great work I appreciate your work, thanks.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Sykomaniac picture Sykomaniac  Â·  3Comments

sylvaincaillot picture sylvaincaillot  Â·  3Comments

rzb picture rzb  Â·  4Comments

egorzekov picture egorzekov  Â·  4Comments

DavidSotoA picture DavidSotoA  Â·  3Comments