Chaning values causes view problems

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]

[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

[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