Chart does not display after loading remains in 0 width x 0 height element

I’m submitting a … (check one with “x”)

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

Current behavior Chart generate a 0x0 ngx-charts-bar-vertical element(this is happening on all charts) though a portion of it appears as per this image: http://imgur.com/zsLUSbi data is per this image: http://imgur.com/cfDl8za

no errors are logged and charts do seem to be created as per this image: http://imgur.com/JmGK9iJ

Expected behavior I just want my chart!

Reproduction of the problem data is per this image: http://imgur.com/cfDl8za using this example: https://swimlane.gitbooks.io/ngx-charts/content/charts/bar-vertical.html data is loaded in during oninit via http <ngx-charts-bar-vertical [view]=“view” [scheme]=“colorScheme” [results]=“wakaChartData” [gradient]=“gradient” [xAxis]=“showXAxis” [yAxis]=“showYAxis” [legend]=“showLegend” [showXAxisLabel]=“showXAxisLabel” [showYAxisLabel]=“showYAxisLabel” [xAxisLabel]=“xAxisLabel” [yAxisLabel]=“yAxisLabel” (select)=“onSelect($event)”> </ngx-charts-bar-vertical>

Please tell us about your environment: Angular CLI Angular 4.1.0 most recent ngx-charts and D3 “@angular/animations”: “^4.0.0”, “@angular/common”: “^4.0.0”, “@angular/compiler”: “^4.0.0”, “@angular/core”: “^4.0.0”, “@angular/forms”: “^4.0.0”, “@angular/http”: “^4.0.0”, “@angular/platform-browser”: “^4.0.0”, “@angular/platform-browser-dynamic”: “^4.0.0”, “@angular/router”: “^4.0.0”, “@ng-bootstrap/ng-bootstrap”: “^1.0.0-alpha.23”, “@ngrx/core”: “^1.2.0”, “@ngrx/store”: “^2.2.2”, “@swimlane/ngx-charts”: “^5.1.2”, “angular2-jwt”: “0.2.2”, “bootstrap”: “^4.0.0-alpha.6”, “core-js”: “^2.4.1”, “cpx”: “^1.5.0”, “d3”: “^4.2.2”, “font-awesome”: “4.7.0”, “ng-bootstrap”: “^1.6.3”, “ngx-bootstrap”: “^1.6.6”, “rxjs”: “^5.3.0”, “simple-line-icons”: “^2.4.1”, “zone.js”: “^0.8.4”

• Browser: [all]

• Language: TypeScript 2.2 { “compileOnSave”: false, “compilerOptions”: { “outDir”: “./dist/out-tsc”, “baseUrl”: “src”, “sourceMap”: true, “declaration”: false, “moduleResolution”: “node”, “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “target”: “es5”, “typeRoots”: [ “node_modules/@types” ], “lib”: [ “es2016”, “dom” ] } }

[marjan-georgiev]

@Splaktar the results input is immutable, meaning you have to pass it a new array for the changes to be detected. You can do that by doing results = [...results] after you modify it.

I am going to close this issue. @wdunn001 if you still have the same problem and can create a stackblitz with an example, I would be happy to reopen.

[Splaktar]

It looks like this is because results doesn’t update as the passed in array changes. I need to do *ngIf on the value passed into results. Also to get the container to resize properly so that the charts don’t run outside of the container, I needed to use display: flex.