I cannot see the bar graph - the data is logging in the expected format

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 I am pulling the data in via an observable, then pushing the properties from the observable into the single array, and the output {{single | json}} produces the correct format for the chart data: [ { "name": "5 - Dormant", "value": 1 }, { "name": "Draft", "value": 9 }, { "name": "2 - Active", "value": 2 }, { "name": "4 - Assigned to Section", "value": 1 }, { "name": "1 - Pending Review", "value": 25 }, { "name": "6 - Out of Scope", "value": 1 }, { "name": "3 - Officer Review", "value": 1 } ] However, I cannot see the chart - there are no errors. I see the text labels and “Legend” but no chart. I have tried fiddling a lot with the css/sass but it appears no graph is there. Within the chart bindings in dev tools I see the following:

<!--bindings={
  "ng-reflect-ng-if": "false"
}-->

I assume that means it is not getting the data? Please help!

Expected behavior For the chart to display.

Reproduction of the problem As described above.

What is the motivation / use case for changing the behavior? N/A

Please tell us about your environment: VS 2017, Angular 4, TypeScript

• ngx-charts version: x.x.x “@swimlane/ngx-charts”: “^5.3.1”,

• Angular version: 2.x.x 4.0

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

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

[kittycatbytes]

Although it displays I still get many errors such as “TypeError: Cannot read property ‘map’ of null”

[kittycatbytes]

I got it working finally. I did not change my service function. I updated the template results to: [results]=“data | async” as follows:

      <ngx-charts-bar-vertical 
                               [view]="view"
                               [scheme]="colorScheme"
                               [results]="data | async"
                               [gradient]="gradient"
                               [xAxis]="showXAxis"
                               [yAxis]="showYAxis"
                               [legend]="showLegend"
                               [showXAxisLabel]="showXAxisLabel"
                               [showYAxisLabel]="showYAxisLabel"
                               (select)="onSelect($event)">
      </ngx-charts-bar-vertical>

And my constructor to:

    constructor(spservice: SharePointService) {
        super();
        this.data = spservice.getData();

    }