0

The following code manages to update the results array but the changes only become visible when I hover over the chart as if it only updates on onFocus events. Is there a way to make the chart element update along with the results array?

<ngx-charts-bar-vertical
                [results]="chartdata"
                xAxis=true
                yAxis=true
            >
            </ngx-charts-bar-vertical>


ngOnInit() {
        this.chartdata = [
            {
                "name": "entry1",
                "value": 500
            },
            {
                "name": "entry2",
                "value": 700
            },
            {
                "name": "entry3",
                "value": 20
            },
            {
                "name": "entry4",
                "value": 100
            }
        ];

        this.ngZone.runOutsideAngular(() => {
            this.interval = setInterval(() => {
                this.chartdata.push({name: "entry " + Date.now().toString(), value: 150});
                this.chartdata = [...this.chartdata];
            }, 3000); //3 seconds
        });

}

Angular version: 11 "@swimlane/ngx-charts": "^18.0.1",

*Edit

As Michael D pointed out the problem was with my implementation of ngzone.

The loop could be constructed in the following ways

 this.ngZone.runOutsideAngular(() => {
            this.ngZone.run(()=> {
                this.interval = setInterval(() => {
                    console.log("refreshing");
                    this.chartdata.push({name: "entry" + Date.now().toString(), value: 150});
                    this.chartdata = [...this.chartdata];
                }, 3000); //3 seconds
            });
        }); // One minute

or


this.interval = setInterval(() => {
                console.log("refreshing");
                this.chartdata.push({name: "entry" + Date.now().toString(), value: 150});
                this.chartdata = [...this.chartdata];
            }, 3000); //3 seconds
F1shboy
  • 13
  • 3
  • From [docs](https://angular.io/api/core/NgZone#runOutsideAngular): "_Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that doesn't trigger Angular change-detection_". Why explicitly use `runOutsideAngular` to not trigger the change detection and worry when the change detection isn't triggered? Do you want the change detection to be triggered or not? – ruth Jul 27 '21 at 14:18
  • Also the two statements in the `setInterval` callback could be merged into one: `this.chartdata = [...this.chartdata, {name: "entry " + Date.now().toString(), value: 150}];` – ruth Jul 27 '21 at 14:20
  • That was a mistake I'm afraid, but thank you for eluding to the solution of my problem – F1shboy Jul 27 '21 at 14:46

0 Answers0