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

[sjdemoor]

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
When refreshing [results] Input data -- and a [timeline] is actively filtering -- console throws a series of errors (example below), and chart does not render.

Error: <path> attribute d: Expected number, "MNaN,121.99666093…".

Expected behavior
Should be able to refresh data between active timeline series and another data series.

Reproduction of the problem
https://plnkr.co/edit/TnzQ1c8BgW0qko6sbgOF?p=preview

Select a [timeline] range, and then click the Toggle Data button.

Note: Toggle Data allows you to refresh the [results] data -- unless a timeline range has been selected.

What is the motivation / use case for changing the behavior?
Unrecoverable error.

Please tell us about your environment:
OSx, WebStorm, Webpack

• ngx-charts version: 6.0.0

• Angular version: 4.1.2

• Browser: [all]
  Chrome Version 59.0.3071.115, Safari Version 10.1.2 (12603.3.8)

• Language: [TypeScript 2.2.1]

[aarondiazr]

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

[jvieyra92]

I have the same issue too, but it only happens when I update my data values, on first load its fine. Is there any progress on this error?

[jvieyra92]

I think the error might be directly related to d3 and not how we implemented our charts. These guys got the same error I got and got it to work but it was in pure d3. https://stackoverflow.com/questions/43577130/error-path-attribute-d-expected-arc-flag-0-or-1

[rojasjandro89]

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.

[jvieyra92]

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.

[sebastianlaag]

All mentioned workarounds do not work for us. Is it possible to fix this issue?

[ceverke]

same problem in my current application... could anybody fix it?

[sandangel]

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

[jclancy93]

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

[thinagaran]

Setting the animation to false solve the problem

[puranzhang]

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.

[mohammadmusaei]

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

[bweben]

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.

[bweben]

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

[originals]

I have the same issue with 0 values in combination with rounded edges on bar charts

[heloufir]

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

[vishaltadha]

Please check if you are missing some required property to provide to chart component.
Adding [barPadding]="config.barPadding" solves the problem for me.

[dpoutier]

I confirm that set [roundEdges] attribute to false fixes the issue for me
Use [roundEdges]="false" as
[scheme]=""
[results]="singleGeocQualite"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="false"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[roundEdges]="false">

[ezequieltejada]

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

This worked for me, thanks!

[sjdrew]

Sure be nice to have this fixed and be able to use roundEdges = Yes without these errors.

This workaround with ngIf's and timeouts work, but then the animation is always from zero instead of the nice way it was designed to change.