Ngx-charts: Chaning values causes view problems

[felix9607]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
If I change chart values and I didn't set a chart view so it fits automaticlly, the height of the parent divs gets higher everytime.
If I set a view, the size stays like it should.

Expected behavior
No size changes of the chart or the parent div.

Reproduction of the problem
file.html <ion-grid> <ion-row> <ngx-charts-gauge [scheme]="colorSchemeGauge" [results]="auslastung" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'Auslastung in %'" [bigSegments]="5" [smallSegments]="3"> </ngx-charts-gauge> </ion-row></ion-grid>

file.ts

higher(){ var buffer = this.auslastung[0].value+5; this.auslastung=[{"name":"Temperatur", "value": buffer}]; }

trigger this function, doesn't matter how.

What is the motivation / use case for changing the behavior?
No destroyed view and easy value changing.

Please tell us about your environment:
Win 10

• ngx-charts version:6.1.0
  

• Angular version: 2.x.x

"@angular/animations": "4.4.3",
"@angular/cdk": "2.0.0-beta.11",
"@angular/common": "4.4.3",
"@angular/compiler": "4.4.3",
"@angular/compiler-cli": "4.4.3",
"@angular/core": "4.4.3",
"@angular/forms": "4.4.3",
"@angular/http": "4.4.3",
"@angular/material": "2.0.0-beta.11",
"@angular/platform-browser": "4.4.3",
"@angular/platform-browser-dynamic": "4.4.3",
"d3": "^4.11.0",

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript 2.3.4 | ES6/7 | ES5]

[marjan-georgiev]

Can you please provide a plunkr where this can be reproduced?

[sandangel]

you can set it up on stackblitz, I think it easier than plunkr
https://stackblitz.com/

[felix9607]

@sandangel I have some troubles setting up a blank ngx charts project.

https://stackblitz.com/edit/ionic-yrw4kk?file=pages%2Fhome%2Fhome.html

I think it includes to important code to reproduce the error but there is probably a little import problem.... sorry for that

[sandangel]

https://stackblitz.com/edit/angular-dso7hm
you can use my setup here. try to extract some code you think it produce the error

[felix9607]

Stackblitz

I hope this helps...you have to go on the 2nd page via the link on the first page.
I noticed putting a single div around it stoped it from rising?
@sandangel @marjan-georgiev

[marjan-georgiev]

@felix9607 yes, the parent container of the chart needs to have its dimensions set so the chart can measure and fill it.

If you set the height of the parent component, the problem stops:
https://stackblitz.com/edit/angular-dkmxg5?file=styles.css

[felix9607]

thats a weak answer...I use the ion-grid compareable with flex boxes and it seems senseless to me, setting the size there. Why can't it just stay as big as it is?

[marjan-georgiev]

You can still do that. Just add a div around the chart and set its width and height to 100%.

As I said, the chart measures it's parent container's dimensions. When you use flex box, the dimensions of the containers depend on the dimensions of the contents. With ngx-charts it's the other way around, so if you don't have any dimensions set to the container, the chart will measure the dimensions of an empty container.

Here's an updated stackblitz with that example:
https://stackblitz.com/edit/angular-dkmxg5?file=app%2Fapp.module.ts

[marjan-georgiev]

Going to close this. Please let me know if you still have issues.

[NatoBoram]

Here's an updated stackblitz with that example:
https://stackblitz.com/edit/angular-dkmxg5?file=app%2Fapp.module.ts

It shows me an empty project