Vue-chartjs: Passing chart size (width / height) as prop doesnt resize the chart

[jcalonso]

Expected Behavior

The chart should of the one specified in the props

Actual Behavior

Appears to be 100% of the view port.

Environment

I'm using vueify and have something like this:

<my-chart width="300" height="300" :data="{{ json_encode($data) }}"></my-chart>

Is this the correct way to pass these properties to alter the size of the chart?

[apertureless]

Hi, thanks for the issue.
Yeah there was a bug with the props.

It's fixed in the current version 1.1.2

However you have to pass the width and height like this:

<my-chart :width="300" :height="300"> </my-chart>

Because the props are numerical.

And you need to disable the chartjs reponsive option.

http://www.chartjs.org/docs/#chart-configuration-global-configuration

There are two options in there, responsive and maintainAspectRatio.
By default both are set to true. But if responsive is true, the canvas container always have the full width of the outer container.

If you set responsive to false, the canvas container will stay at the width and height, which are set.

If you won't both, a fix width or max-width and responsiveness, then you can simply wrap the canvas into a div with a class.

<div class="grid grid-1-3"> 
 <my-chart></my-chart>
</div>

[jcalonso]

Thanks! it works now!. :tada:

[jin2125]

why i set width and height， but result not i want, example: except width: 200; height: 100, but result not match except

[apertureless]

Like exaplained in the chart.js docs you have to pass the options object with

{
responsive: false,
maintainAspectRatio: false
}

Just checkout some of the examples