Ng2-charts: Chart.js and NG2-Charts Not Binding Data After Update

[wuno]

Current versions

angular-cli: 1.0.0-beta.17
node: 6.7.0
os: darwin x64 Sierra
npm: 3.10.3

After updating to

"angular-cli": "1.0.0-beta.17",

I started getting errors. I went ahead and updated everything to the latest versions in hope this would clear them. it appears that Charts.js is not being imported to the project after updates. Charts were displaying fine before updating angular-cli. Now that I have updated everything even rolling back won't seem to fix the problem.

Basically anywhere in my component.ts file that I bind a data object to the chart it gives me errors saying that the data object is not a known property off basic-chart. I believe this is a versioning issue and it is not being imported into the project correctly after updates.

I was importing the charts like this in angular-cli.json

"scripts": [
        "../node_modules/chart.js/dist/Chart.bundle.min.js",
        "../node_modules/chart.js/dist/Chart.min.js"
      ],

Then in app.module.ts

`import { ChartsModule }                 from 'ng2-charts/ng2-charts';`

@NgModule({
  imports: [
    BrowserModule,
    routing,
    Ng2BootstrapModule,
    ChartsModule
  ],

Current versions I am running,

"dependencies": {
    "@angular/common": "2.0.2",
    "@angular/compiler": "2.0.2",
    "@angular/core": "2.0.2",
    "@angular/forms": "2.0.2",
    "@angular/http": "2.0.2",
    "@angular/platform-browser": "2.0.2",
    "@angular/platform-browser-dynamic": "2.0.2",
    "@angular/router": "3.0.2",
    "@angular/upgrade": "2.0.2",
    "core-js": "^2.4.0",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.6.25",
    "chart.js": "^2.3.0",
    "ng2-bootstrap": "^1.1.5",
    "ng2-charts": "^1.3.0",
    "moment": "^2.15.1"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.34",
    "angular-cli": "1.0.0-beta.17",
    "codelyzer": "1.0.0-beta.0",
    "jasmine-core": "^2.5.1",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.4.1",
    "tslint": "^3.15.1",
    "typescript": "^2.0.3"
  }

Here are a few of the 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.schemas' 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
Can't bind to 'labels' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'labels' 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.schemas' of this component to suppress this message.
 ("ss="chart-wrapper p-x-1">
                    <base-chart class="chart" [datasets]="lineChart1Data" [ERROR ->][labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="line"): DashboardComponent@19:74
Can't bind to 'options' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'options' 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.schemas' of this component to suppress this message.
 ("                  <base-chart class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [ERROR ->][options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="l"): DashboardComponent@19:102
Can't bind to 'colors' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'colors' 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.schemas' of this component to suppress this message.
 ("class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [ERROR ->][colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="c"): DashboardComponent@19:132
Can't bind to 'legend' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'legend' 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.schemas' of this component to suppress this message.
 ("eChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [ERROR ->][legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartCl"): DashboardComponent@19:161
Can't bind to 'chartType' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'chartType' 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.schemas' of this component to suppress this message.
 ("hart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [ERROR ->][chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
"): DashboardComponent@19:189

[Puigcerber]

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

[wuno]

Thank you. After changing <base-chart...></base-chart> to <canvas baseChart></canvas> in all places that it was the app compiled and rendered.

[Puigcerber]

So you can close the issue now @wuno. I'm glad it helped!

[luchillo17]

@Puigcerber I'm having the same issues however for me it says can't bind to 'data' nor 'labels'.

[wuno]

@Luchillo This is the same problem. You need to go into your html and change the base-chart element to canvas then make base-chart baseChart the tag in the element just like in the example above. It wont bind to any of your data sets unless you do this. Including labels. You can see this stackoverflow question here. http://stackoverflow.com/questions/39927848/ng2-charts-error-cant-bind-datasets-to-base-charts-in-angular2-after-update/39962127?noredirect=1#comment67209280_39962127

[luchillo17]

Arghh i'm so dumb, is baseChart not base-chart attribute, however i noticed my error is another, i have this in my build cli, so i think it's an error with Rollup?:

[tubamohsin]

@Luchillo How did you resolve the error : ng2-charts\ng2-charts.js does not export ChartsModule

[luchillo17]

I haven't, i'm talking right now with Rollup in another issue: https://github.com/rollup/rollup/issues/1054

[rheem-it02]

Hi Luchillo , i have the same error
isn't solved yet ?

[luchillo17]

Dunno, i've commented out those lines and working on something else.

[vishwastyagi]

Keep chartjs script tag as first statement(after all link tag) under header tag in the index.html.

[rheem-it02]

very thanks

On Fri, Nov 18, 2016 at 1:28 PM, vishwastyagi [email protected]
wrote:

Keep chartjs script tag first in the index.html.

Dashboard

.....
....

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-charts/issues/455#issuecomment-261499081,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWCDsCvu8_GJtUtmSM5f8DVFq49UyLCwks5q_X3GgaJpZM4KRycC
.

[balr404]

(chartClick)="chartClicked($event)">

Someone can guide me, what "baseChart" represents here ? . is it a property or variable ?

[Puigcerber]

Hey @balr404! It's a directive.