use of plugins

[MP-OT]

He tried to integrate a plugin but I could not make it work, then I leave the error, the TS, the HTML and the package.json.

Any suggestions that do not involve updating any dependencies?

ERROR->

`Can't bind to 'plugins' since it isn't a known property of 'canvas'. ("
    [legend]="legend" 
    [chartType]="chartType" 
    [ERROR ->][plugins]="abs"
    ></canvas>
</div>"): ng:///MFMPModule/ChartComponent.html@10:4`

TS-FILE

`import { Component, Input } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, BaseChartDirective } from 'ng2-charts';
import * as pluginAnnotations from 'chartjs-plugin-annotation';

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

export class ChartComponent {
    public lineChartPlugins = [pluginAnnotations];

    @Input() datasets;
    @Input() labels;
    @Input() options;
    @Input() colors;
    @Input() legend;
    @Input() chartType;
}`

HTML

`<div style="display: block;">
    <canvas 
    baseChart width="400" 
    height="250" 
    [datasets]="datasets" 
    [labels]="labels" 
    [options]="options" 
    [colors]="colors" 
    [legend]="legend" 
    [chartType]="chartType" 
    [plugins]="lineChartPlugins"
    ></canvas>
</div>`

package.json

`{
  "name": "template",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.3.0",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.4.7",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "@ngx-translate/core": "^7.1.0",
    "@ngx-translate/http-loader": "^2.0.1",
    "@okta/okta-angular": "^1.0.1",
    "@types/html2canvas": "^0.5.35",
    "@types/jquery": "^3.3.1",
    "@types/jqueryui": "^1.12.2",
    "angular-font-awesome": "^3.1.2",
    "angular-handsontable": "^1.0.0-beta3",
    "bootstrap": "4.0.0-beta.2",
    "canvasjs": "^1.8.1",
    "chart.js": "^2.0.0",
    "chartjs-plugin-annotation": "^0.5.7",
    "core-js": "^2.4.1",
    "file-saver": "^1.3.3",
    "font-awesome": "^4.7.0",
    "html2canvas": "^1.0.0-alpha.9",
    "jquery": "^3.4.1",
    "jquery-ui": "^1.12.1",
    "ng2-charts": "^1.6.0",
    "ngx-contextmenu": "^1.3.5",
    "ngx-i18n": "^1.0.1",
    "ngx-image-cropper": "^1.0.1",
    "ngx-smart-modal": "^2.0.3",
    "popper.js": "^1.11.0",
    "rxjs": "^5.4.2",
    "tableexport": "^5.0.0",
    "web-animations-js": "^2.3.2",
    "xlsx": "^0.12.6",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "jqueryui": "^1.11.1",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}
`

[MickL]

Works for me

      <canvas baseChart
              [data]="chartData"
              [options]="chartOptions"
              [plugins]="chartPlugins"
              chartType="line"
      >
      </canvas>

[ccaiqueez]

which solution is correct?