Charts are given a fixed width, even when they are set to be responsive

[devmattrick]

Expected Behavior

Charts would resize based on the size of their parent container.

Actual Behavior

Charts are (by default) 400x400px in size. This is set as an HTML attribute rather than a CSS size. This is the markup that it generates and this is how I am using vue-chartjs.

Environment

• vue.js version: 2.2.6
• vue-chart.js version: 2.6.3
• npm version: 4.5.0

[apertureless]

If you set the responsive attribute to true, Chartjs will automatically set the width and height of the canvas according to the outer container. If you resize the container or your window, you will see, that these numbers change.

That your charts are per default 400x400 must be related to your outer containers.

As you see in this codepen it resizes.

[devmattrick]

Ah I see, if the chart is in a container which is not explicitly set to be 100% wide, it won't force its container to fill its parent. Thanks for the quick reply and sorry for taking your time!