CODEWITHSUNDEEP
javascriptangulartypescriptng2-charts
BBaysinger
BBaysinger

Reputation: 6847

Angular2 @ViewChild is not picking up BaseChartDirective from ng2-charts

I'm using ng2-charts v1.5.0, and I'm trying to get the chart to update with new data after a click. I'm following examples posted by others.

In my view I have:

<div style="display: block">

  <canvas #chart baseChart
              [data]="dChartData"
              [labels]="dChartLabels"
              [chartType]="dChartType"
              (chartClick)="chartClicked($event)">
  </canvas>

</div>

If I write:

@ViewChild( BaseChartDirective ) chart: BaseChartDirective;

Then I get:

__zone_symbol__error : Error: Can't construct a query for the property "chart" of "ChartTest1WidgetComponent" since the query selector wasn't defined.

If I write:

@ViewChild( 'chart' ) chart: BaseChartDirective;

Then I call this.chart.ngOnChanges({});, but I get: _this.chart.ngOnChanges is not a function

This doesn't make sense to me. How can I get the proper view child that is a reference to BaseChartDirective?

Upvotes: 1

Views: 6915

Answers (1)

Vysh
Vysh

Reputation: 738

This worked for me: @ViewChild(BaseChartDirective) private Chart: BaseChartDirective; and then this.Chart.ngOnChanges({} as SimpleChanges).

But, the easier way to do it is to actually update the variable dChartData with the new data and it automatically should update your chart with the new data. It is quicker than using ngOnChanges. Hope this helps!

Upvotes: 1

Related Questions