'Can't bind to 'type' since it isn't a known property of 'canvas' with angular13

I'm facing a problem right now while trying to create a chart of stock data that I got using a free API with Angular. The problem is with the canvas balise. I'm using chart.js and ng2-charts. I have already tried so many solutions like NPM install or the modules imports but nothing helps me out.

Here is the error I always find:

error NG8002: Can't bind to 'chartType' since it isn't a known property of 'canvas'. error NG8002: Can't bind to 'chartType' since it isn't a known property of 'canvas'. error NG8002: Can't bind to 'datasets' since it isn't a known property of 'canvas'.

Here's my HTML code

<div class='card'>
  <div class='card-header'>
    {{title}}
  </div>
  <div class="card-body"><br />

    <input (change)="onChange($event)" (keyup)="onKeyup($event)" class="form-control" type="text"
      placeholder="Search..." list="searchresults" autofocus />
    <datalist id="searchresults">
      <option *ngFor="let i of searchResults" value="{{i.symbol | uppercase}}">{{i.name | titlecase}}</option>
    </datalist>

    <br />

    <div class="form-group row" id="timeframe">
      <label class="col-sm-6 col-form-label" for="timeframe">Timeframe:</label>
      <div class="col-sm-6">
        <select (change)="onTimeChange($event.target.value)" class="form-control form-control-sm" name="timeframe">
          <option id="{{timeframes[timeframe.id].id}}" value="{{timeframes[timeframe.id].timeframe}}"
            selected="{{timeframes[timeframe.id].selected}}" *ngFor="let timeframe of timeframes">
            {{timeframes[timeframe.id].label}}</option>
        </select>
      </div>
    </div>

    <br />

    <canvas
      baseChart
      [chartType]="'bar'"
      [datasets]="chartData"
      [options]="chartOptions"
      [legend]="chartLegend"
      [labels]="chartLabels">
    </canvas>

  </div>
</div>





<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

And here is my ts code:


import { Component, OnInit, NgModule } from '@angular/core';
import { FinanceServiceService } from 'src/app/services/finance-service.service';




@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent {
  title = 'ngFinance';
  searchResults = [];
  keyword: string = '';

  date$ = [];
  lineData$ = [];
  barData$ = [];
  dailyData = [];
  lineCount: number;

and I still got some code here but just didn't want to use the space here.

And you can find my imports on app.modules.ts

...
import { ChartsModule } from 'ng2-charts';
...
angularcharts


Solution 1:[1]

Have you put ChartsModule in @NgMdule imports table?

...
import { NgChartsModule } from 'ng2-charts';
...
@NgModule({
  declarations: [
  ...
  ],
  imports: [
   ...
    NgChartsModule
  ],
  ...
})

Additionaly, what version of ng2-charts ans chart.js are you using ?

Solution 2:[2]

It would help to know what version of ng2-charts you are using, if you could share it.

What is the problem ?

In the latest version of chart, they have removed a lot of properties in different objects, and also changed some of the properties names. Here is the a link.

Chart configuration official documentation

Solution:

In your case, you want to define the type of the chart. You are currently using "chartType". But the new attribute name is "type". Thus you need to use this instead :

  [type]="'line'"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Iznogood1
Solution 2 Isabelle

Related Questions