Solutions that didn't work: 1 (SO answer) and 2 (GitHub issue)
My first problem was version incompatibility between ng2-charts
and chart.js
so I ended up using this answer on SO and it worked (so now my package.json
looks like this "ng2-charts": "^2.4.3"
and "chart.js": "^2.9.4"
).
But now another problem developed - I can't bind anything to the canvas inside page.html
files:
- I have tried importing
ChartsModule
insidemypage.module.ts
and also inapp.module.ts
without any changes. - I have no errors on compiling - only errors I get are those inside
console.log
when I jump into my page. - I have also tried this solutio on SO suggesting to add
'ng2-charts/ng2-charts'
inside the import. But still no changes.
How can I bind properties to the canvas properly in Angular
with ng2-charts
library?
Html code for my page:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/home"></ion-back-button>
</ion-buttons>
<ion-title> Trendy {{ device.name }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid class="center">
<canvas baseChart
[datasets]="dataX"
[labels]="dataY"
[chartType]="lineChartType">
</canvas>
</ion-grid>
</ion-content>
Page module.ts code:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { TableDeviceTrendsPageRoutingModule } from './table-device-trends-routing.module';
import { TableDeviceTrendsPage } from './table-device-trends.page';
import { ChartsModule } from 'ng2-charts';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
TableDeviceTrendsPageRoutingModule,
ChartsModule
],
declarations: [TableDeviceTrendsPage]
})
export class TableDeviceTrendsPageModule {}