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

looks like have type issues in your code, most likely you need to fix those or tell ts to stop complaining about them. — Dipen Shah
code related types issues I fixed but chart js related some propeties are undefined — Soumya Gangamwar
@Owen Kelvin I added tscong.json and tsconfig.app.json,,Please find modified question — Soumya Gangamwar

Kavinda Senarathne Kavinda Senarathne · Accepted Answer · 2020-10-30T11:41:30

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);
  }
}

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

1 Answers