Property height is not reactive

[ace-han]

It seems height is not synced when viewport resized.

https://codepen.io/ace-han/pen/mdOeVwM

Below is a screen capture when the window resized

[xr0master]

Hey.
I'm not sure why this should be in sync? This works like any HTML element. If you prefer to work with inline styles, then don't use the attributes.

[ace-han]

I'm not sure why this should be in sync?

height is a reactive attribute that got passed along(from parent component to children).

From browser devtool, say,
height=10 at t0,
then click the button to change, say,
height=100 at t1,

You will see that , <canvas height={h1} .... style="...; height: {h2}" />

1. Sometimes h1 change to 100 and then back to 10 in a blink (short time), hence height is NOT reactive
2. Sometimes h1 did change to 100, which (h1=100) != (h2=10), then <canvas /> fails to display just like the screen capture above. If a resize happen after then, <canvas /> will display with h1=h2=100 appropriately

[xr0master]

I suggest you open a ticket in the Chart.js repository. This issue does not apply to the chart.js wrapper.