0

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:

enter image description here

  • I have tried importing ChartsModule inside mypage.module.ts and also in app.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 {}
Jakub Szlaur
  • 1,852
  • 10
  • 39
  • 1
    I just created a new ionic project and using "ng2-charts": "^2.4.3" and "chart.js": "^2.9.4", and it worked fine. Can you share a sample project for us to look at? – lee whitbeck Sep 29 '21 at 19:30
  • A simple restart did the trick at the end ... sorry for bringing this up so late. – Jakub Szlaur Nov 05 '21 at 09:00

0 Answers0