Ng2-charts: Accessing BaseChartDirective with @ViewChild

[berkerdemirer]

Basically, i am subscribed to mqtt host and recieving data each second. I need to print them on two different charts but i cannot acces to baseChart with @ViewChild it always returns undefined therefore my update method is not working. I managed to update one chart with following code:

UPDATES ONLY ONE CHART
@ViewChild(BaseChartDirective) private _chart ; this._chart.chart.update();
But its not enough for me ..

TRIED TO DIVIDE BASECHART

@ViewChild('panelA') panelA : BaseChartDirective; @ViewChild('panelB) panelB : BaseChartDirective; this.panelA.chart.update(); this.panelA.chart.update();

Markup Code

` [datasets]="panel1Dataset"
[labels]="panel1Labels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"

[datasets]="panel2Dataset"
[labels]="panel1Labels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
`

Error

Cannot read property 'update' of undefined

[berkerdemirer]

I figured it out. I was trying to reach the by using # and ViewChild, therefore my update function was trying to update the canvas not the directive inside. Thats why i changed the html part of the code as follows:

Exporting this canvas as baseChart to my defined variable.

[balr404]

Could you please share the code change what you have done to resolve the issue. It helps us to understand the fix

I am new to this ng2-charts, I m also facing similar kind of issue.
If you could share the code snippet that will help me to fix my issue.

Thanks

[toma315]

Could you please share the code change what you have done to resolve the issue. It helps us to understand the fix

Just in case someone else runs into this old issue in search of a solution:

MARKUP

<canvas #panelA=base-chart baseChart ...>

Typescript

@ViewChild('panelA') panelAChart;
[...]
this.panelAChart.update()   // for instance

It is really that simple.

[micobarac]

The suggested HTML markup is invalid:

#panelA=base-chart

[ZaLiTHkA]

In the interest of not leading others astray:

The suggested HTML markup is invalid:

#panelA=base-chart

..for everything before HTML5, sure.

But not only is it valid in current standards (which were already around in Nov 2019), it's also used to tell Angular to create a template reference variable, even in the current Angular documentation (v10.0.1 at the time of writing this).