Ngx-charts: Reset the timeline when data on chart changes or updated.

[mohddanish211]

Is your feature request related to a problem? Please describe.
I am using ngx-chart (10.1.0v ) to visualize my data. when I select the particular range from timeline. it will remain there when the data changes or chart gets updated. It only gets reset when I click somewhere outside the timeline. Is it possible to reset the timeline when the chart data gets updated.

Describe the solution you'd like
It would be nice if the timeline gets reset automatically when the chart data updates. The previous selected timeline range gets reset and I am able to select new range from the timeline to zoom the visualization on chart.

[radzik07]

I'd label it as a bug.
Btw @mohddanish211 did you maybe find a solution for this?

[radzik07]

FYI I came up with something that actually works...

1. Mark ngx-charts-line-chart element in template with #chart
2. In TS define @ViewChild('chart') chart: LineChartComponent;
3. You need to trigger this code after the data change happens:
   this.chart.filteredDomain = null; this.chart.update();.
   I put it in ngAfterViewInit inside a subscription.

[mohddanish211]

Hey @radzik07 No not yet it still an issue in my application.

[GauthierV]

@radzik07 Thx for your solution, my charts update well after data changes.
There is still a problem though. While the filteredDomain is cleared and the charts updated, the timeline is still showing the selection even if the filteredDomain is null.
Do you think there is a way to make the "rectangle" on the timeline disepeare?

[labsnoir]

Did you find a solution?
I just stepped into the same problem. A possibility to reset the timeline rectangle would be great.

[mohddanish211]

@labsnoir I had changed my approach completely, built the chart using D3.js, but I guess there is a way to reset the timeline. I will check and get back to you.

[f4irline]

+1 to this. It'd be nice to cleanly (without setting nulls in my code) reset the timeline. The solution @radzik07 works, but the timeline rectangle selection does not clear.

[kolbak]

FYI I came up with something that actually works...

1. Mark ngx-charts-line-chart element in template with #chart
2. In TS define @ViewChild('chart') chart: LineChartComponent;
3. You need to trigger this code after the data change happens:
   this.chart.filteredDomain = null; this.chart.update();.
   I put it in ngAfterViewInit inside a subscription.

@radzik07
Hi, can you explain in more details please?

[ghost]

Guys are there any news here?

[arnauhortelano]

Same problem

[chiangs]

As @f4irline says, the solution works, but the selection rectangle does not reset/disappear. I have tried dispatching a click event, i have tried selecting the rectangle and updating the style to display none as that is what happens when it is reset, but none of that is working.

I have a solution for getting rid of the selection box using the ChangeDetectorRef. It's not the BEST solution but it works. When resetting the filteredDomain change the timeline prop to false, manually set a change detection and then continue building the graph with the props where timeline is true and it just basically show/hide to reset the timeline.

this.chart.filteredDomain = null;
this.timeline = false;
this.cd.detectChanges();