ngx-charts: [ngx-charts-line-chart] timeline: throws error when changing [results] Input() with [timeline] active.

Just set [roundEdges] attribute to false, This error happened when D3 try to calculate arc of round edges! So use this : [roundEdges]=“false”

Setting the animation to false solve the problem

I have the same issue, with Bar Charts! When pass the new data to array result, console shows path errors…Although the graph is updated

I confirm that set [roundEdges] attribute to false fixes the issue for me Use [roundEdges]=“false” as <ngx-charts-bar-horizontal
[scheme]=“” [results]=“singleGeocQualite” [gradient]=“gradient” [xAxis]=“showXAxis” [yAxis]=“showYAxis” [legend]=“false” [showXAxisLabel]=“showXAxisLabel” [showYAxisLabel]=“showYAxisLabel” [xAxisLabel]=“xAxisLabel” [yAxisLabel]=“yAxisLabel” [roundEdges]=“false”> </ngx-charts-bar-horizontal>

This issue in our case appeared to be: when we flush with new data that contain value: 0, this error emerged. Out temporary hack is to replace 0 with 0.000001(essentially some small enough value), and that solved the issue.

We fixed the issue by simply adding *ngIf=“loaded” to the ngx-chart tag. In the typescript we have it set to false until all the chart data comes back, then set it to true.

Is there an update on this issue? I’m using v19.2.0 and I get the errors as mentioned above. The workarounds still work, but it would be great to have a proper solution.

I did a simple workaround and it is working fine for me

// ...
// clear the data array
this.data = [];
// Initialize the data array
setTimeout(() => { this.data = [...results]; });

with this approach I am not having the error anymore

I had the same problem in the BarChart and could fix it with the [roundEdges]="false" option but now I have the problem in the StackedBarChart where there’s no option [roundEdges]="false". Does anybody now any possible fix to that?

I did try to set the animations to false but that didn’t help either.

just add an *ngIf and when data is updated (e.g via observable, event…), set it to false, then setTimeout 200ms set to true.

I’m still having this same issue

I did a bit more research and found out that the problem is an empty string in my dataset.

Having the same issue here. I tried a bunch of diff things to make sure data was defined before passing into and rendering chart(*ngIf, Timeouts, etc.), to no avail. Im using stacked area chart and can get regular area charts working with the exact same code

I have the same problem. It throws an error for each bar everytime time the data is updated. The chart is properly updated though…I’m guessing they’re just calculation errors as part of the process of updating the values because at the end the data is displayed as expected.