In Angular project I am implementing charts using chart.js latest version 2.9.3
I implemented doughnut chart, stacked bar chart perfectly,,Now I have to implement stacked bar chart which contain data labels on y-axis.
So from chart.js documentation using chartjs-plugin-datalabels plugin I tried to display the labels here I got cli error decalare module chart.js
To resolve this above error I installed "@types/chart.js": "^2.9.27", by folllowing this solution https://github.com/chartjs/chartjs-plugin-datalabels/pull/121#issuecomment-473327301
now in my package.json
-
"@types/chart.js": "^2.9.27",
"chart.js": "^2.9.3",
"chartjs-plugin-datalabels": "^0.7.0",
But after installing @types i am encountering so many cli error which was not before that
The types of 'elements.point.pointStyle' are incompatible between these types.
Type 'string' is not assignable to type 'PointStyle'
The expected type comes from property 'options' which is declared here on type 'ChartConfiguration'
src/app/dashboard1/litmus-utilization-chart/litmus-utilization-chart.component.ts:48:11 - error TS2339: Property 'elements' does not exist on type 'typeof Chart'.
48 Chart.elements.Rectangle.prototype.draw = function () {
Object literal may only specify known properties, and 'yAlign' does not exist in type 'ChartTooltipOptions'.
352 yAlign: "top",
~~~~~~~~~~~~~
node_modules/@types/chart.js/index.d.ts:297:9 297 tooltips?: ChartTooltipOptions;
what are thease error , How to resolve thease,,
But In stackerzbilz ANgular 10 project it's working fine, Not understanding root cause of the issue https://stackblitz.com/edit/angular-10-base-template-2hul5i
My Package.json
{
"name": "Litmus",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"build": "ng build",
"build:prod": "ng build --configuration production",
"test": "jest",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/setupJest.ts"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/dist/",
"<rootDir>/src/test.ts"
]
},
"dependencies": {
"@angular/animations": "^10.0.11",
"@angular/cdk": "^10.1.3",
"@angular/common": "~10.0.1",
"@angular/compiler": "~10.0.1",
"@angular/core": "~10.0.1",
"@angular/forms": "~10.0.1",
"@angular/material": "^10.1.3",
"@angular/platform-browser": "~10.0.1",
"@angular/platform-browser-dynamic": "~10.0.1",
"@angular/router": "~10.0.1",
"@volo/abp.ng.account": "~3.0.4",
"@volo/abp.ng.audit-logging": "~3.0.4",
"@volo/abp.ng.identity": "~3.0.4",
"@volo/abp.ng.identity-server": "~3.0.4",
"@volo/abp.ng.language-management": "~3.0.4",
"@volo/abp.ng.saas": "~3.0.4",
"@volo/abp.ng.text-template-management": "~3.0.4",
"@volo/abp.ng.theme.lepton": "~3.0.4",
"chart.js": "^2.9.3",
"chartjs-plugin-datalabels": "^0.7.0",
"jest": "^26.0.1",
"jest-preset-angular": "^8.2.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.31",
"rxjs": "~6.5.4",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular-devkit/build-ng-packagr": "~0.1000.0",
"@angular/cli": "~10.0.0",
"@angular/compiler-cli": "~10.0.1",
"@angular/language-service": "~10.0.1",
"@ngxs/logger-plugin": "^3.6.2",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ng-packagr": "^10.0.0",
"ngxs-schematic": "^1.1.9",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
after adding "@types/chart.js": "^2.9.27", geeting above error image 2, If I did not added getting error image-1
Please give any suggestions
Thanks in advance