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
ChartsModuleinsidemypage.module.tsand also inapp.module.tswithout any changes. - I have no errors on compiling - only errors I get are those inside
console.logwhen 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 {}
