CODEWITHSUNDEEP
cssangularheightchart.js
John
John

Reputation: 273

Change height of chartjs dynamically

I'm using Angular 5 with Chartjs. I have a chart where I want the height to change depending on a boolean variable (show). If true, I want the height to be 25. If false I want the height to be 65. I tried this but it doesn't work. How do I change the height conditionally?

<div  [hidden]="!chart" style="position: relative; float: left; ">
            <canvas id="canvas" width="100" height="{show ? '25':'65'}">{{ chart }}</canvas>
</div>

Upvotes: 1

Views: 1349

Answers (1)

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

This is wrong syntax.

height="{show ? '25':'65'}"

I assume you are mixing it up with React. In Angular, first you need to wrap the name of the prop in [], like [height], and on the right you simply specify a JavaScript expression (you do not wrap it in {}).

[height]="show ? '25px' : '65px'"

You also have to specify units.

If you don't want to specify units, there's an alternative way to do it:

[height.px]="show ? 25 : 65"

Upvotes: 1

Related Questions