Ng2-charts: Data stacks when updating datasets

[alexverbitsky]

I try to display data in accordance with selected option, but chart works incorrect on hover and I get the folowing behaviour.

I think the reason is in binding chart data to properties.

            <canvas baseChart class="chart"
                    [datasets]="mainChart.mainChartData"
                    [labels]="mainChart.xAxisLabels"
                    [options]="mainChart.chartOptions"
                    [colors]="mainChart.chartColors"
                    [legend]="mainChart.chartLegend"
                    [chartType]="mainChart.chartType">
            </canvas>

I simply update this data after select another option. Seems like the current data stacks somehow. I tried to refresh my chart

@ViewChild(BaseChartDirective) private chart: BaseChartDirective;

via ngOnInit and ngOnDestroy and so on, but I didn't get expected behaviour. How can I resolve this?

Angular version: 4.3.4
ng2-charts: 1.6.0

[Joklogh]

Hi @leshanative,
I resolved this issue by wrapping whole <canvas> into div and then i was showing this <div by using *ngIf when the data was ready

[alexverbitsky]

@Joklogh I don't know how but it works so damn perfectly. Thanks a lot!

[Joklogh]

@leshanative you are welcome. I guess the ng-charts does not like to change data or dataset on already initialized graph, but when you reinitialize the graph using *ngIf then the data in graph will be updated.

[Joklogh]

Hi @Antonyselt
Here is my code.
https://stackblitz.com/edit/angular-2jqsrc
I found new solution which seems to be more fluid (it's in function updateData2).
Instead of hiding and showing graph you can create copy of old data, then add new data into this copy and at the end assign old data to be equal to copy.
If you encounter any error, please let me know, I hope this wil help you.

[Joklogh]

@Antonyselt
Did you also tried implementing second solution (updateData2)?

[paviad]

It appears this is resolved, if not, feel free to reopen and provide an example of the issue.