CODEWITHSUNDEEP
javascriptangulartypescriptangular-cli
wuno
wuno

Reputation: 9875

NG2-Charts Error Can't Bind Datasets To Base-Charts In Angular2 After Update

After updating OSX to Sierra and angular-cli my Angular 2 app broke. I now am receiving errors regarding ng2-charts

I have tried to revert back and even tried rolling back further to other versions of Node, NPM and Angular-cli but nothing will clear the errors and allow the app to render.

These are the errors I am getting which reference every line I am trying to bind datasets to base-chart.

Binding

 <base-chart class="chart" 
[datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
     style="height:70px;"></base-chart>

Error

zone.js:344Unhandled Promise rejection: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'datasets' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("iv>
                <div class="chart-wrapper p-x-1">
                    <base-chart class="chart" [ERROR ->][datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineC"): DashboardComponent@19:46

I have been working on this app for weeks without any problems and now this has been crushing me all day, Any ideas?

Upvotes: 2

Views: 779

Answers (1)

wuno
wuno

Reputation: 9875

There was breaking changes in 1.4.0 and you need to use <canvas baseChart...></canvas> instead of <base-chart...></base-chart>.

As mentioned in this git issue

See the breaking changes here

BREAKING CHANGES

charts: - base-chart component became baseChart directive so you need to convert

<base-chart...></base-chart>

to

<canvas baseChart...></canvas>

and most probably wrap in

 <div style='display:block'>...</div>

Upvotes: 4

Related Questions