Vue-chartjs: Responsive property doesn't work

[Karpengold]

I used Line chart with options:

 responsive: true,
 maintainAspectRatio: false,

And use wrappers for chart:

<div class="main">

    <div class="chart">
      <chart
        :chart-data="datacollection"
        :options="chartoptions"
      />
    </div>

  </div>


.chart {
  max-width: 80%;
  max-height: 30%;
  position: relative;
}


.main {
  height: 250px;
  width: 250px;
  position: absolute;
}

but chart doesn't scale by height

[tombraul]

I can confirm this.

I am using vue 2.6.10, vue-chartjs 3.4.2 and chart.js 2.8.0

[apertureless]

Can you maybe provide a codepen or other runable reproduction?

[DrLongGhost]

@apertureless -- I believe I have found the cause of this (or at least a related issue) and have a suggestion for a fix.

Chart.js docs when describing 'aspectRatio': "Note that this option is ignored if the height is explicitly defined either as attribute or via the style." per https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options

vue-chartjs does not offer any facility to NOT define the height and width. They always default to being 400x400 inlined in the html, even when they are not defined, which means the "aspectRatio" property (and responsive design in general?) will simply never work.

This is the problematic code: https://github.com/apertureless/vue-chartjs/blob/develop/src/BaseCharts.js#L16

I have verified that the following modification to BaseChart.js enables a responsive design and aspectRatio to function as intended:

The reproduction case would basically be the inability of the current code to utilize the aspectRatio property. When you make ANY chart with the following configuration you should see a chart that is 4 times as wide as it is tall. The chart should expand to fill the full width of the browser:

chartOptions: { responsive: true, aspectRatio: 4, maintainAspectRatio: true, },

Conversely, this code should make a chart that is 4 times as tall as it is wide:

chartOptions: { responsive: true, aspectRatio: 0.25, maintainAspectRatio: true, },

With the current version of your code, this functionality is only partially working. The chart does expand to fill the full width of the browser, but it does not respect the aspectRatio property at all and always has a 1:1 height/width ratio.

Fortunately, because the observed default behavior of not specifying a height and width is the same between both versions of the code (ie, they both result in 100% width, and not 400px width), I wouldn't consider this bug fix a breaking change and am hoping you can get it deployed to npm soon, if you are able and agree with the proposed solution.

I'm happy to send it through as a PR if that might expedite things. Thanks.

[DrLongGhost]

Yay! I found a workaround with the current code. If you pass in null for height and width, it will respect those values and aspectRatio will still work. I do still think this is a pretty critical bug, but at least I don't need to wait on a fix now.

Here's what this looks like:

[apertureless]

Ah nice finding!
Yeah we have already a PR for this: https://github.com/apertureless/vue-chartjs/pull/504

However, removing the defaults is a breaking change. Thus I wanted to rewrite the reactive mixins, before merging this.

[ImSeaWorld]

@apertureless Any updates on that? No movement in a while.
@DrLongGhost Thank you good sir! Works perfectly!

[apertureless]

Not much time currently.
However I will most likeley release it together with #513 #503 #601 as version 4.0.0
Because then I have all breaking changes in one release. Makes it easier to migrate.

[ThiagoMatosBR]

@DrLongGhost you are a life saver!