how to show data label on barchart using chart.js in Angular10 project?

Question

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

Answer 1

Example chart with labels is as follows

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Bar Chart Example in Angular 4';

  // ADD CHART OPTIONS. 
  chartOptions = {
    responsive: true    // THIS WILL MAKE THE CHART RESPONSIVE (VISIBLE IN ANY DEVICE).
  }

  labels =  ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

  // STATIC DATA FOR THE CHART IN JSON FORMAT.
  chartData = [
    {
      label: '1st Year',
      data: [21, 56, 4, 31, 45, 15, 57, 61, 9, 17, 24, 59] 
    },
    { 
      label: '2nd Year',
      data: [47, 9, 28, 54, 77, 51, 24]
    }
  ];

  // CHART COLOR.
  colors = [
    { // 1st Year.
      backgroundColor: 'rgba(77,83,96,0.2)'
    },
    { // 2nd Year.
      backgroundColor: 'rgba(30, 169, 224, 0.8)'
    }
  ]
  
  // CHART CLICK EVENT.
  onChartClick(event) {
    console.log(event);
  }
}