Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

190
Views
After downgrading versions of chart.js and ng2-charts I can't bind any properties to canvas

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 {}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!