chartjs-plugin-datalabels not showing values on chartjs-CodePudding

I am using the following versions:

Angular: 14.0.6
TypeScript: 4.7.4
chart.js: ^3.8.2
chartjs-plugin-annotation: ^1.4.0
chartjs-plugin-datalabels: ^2.0.0
ng2-charts: ^4.0.0

And I am trying to create a simple demo Doughnat Chart with dummy data. The problem is that the values are not shown on the chart, no matter what I tryied. I helped myself using that as an example but I figured out that with the newer version this approach is not working.. Here is what I tried so far..

My app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FoodManagementModule } from './food-management/food-management.module';
import { NgChartsModule } from 'ng2-charts';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FoodManagementModule,
    NgChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My Template looks like that:

      <div >
        <div >
          <div >
            <canvas
              baseChart
              [datasets]="doughnutChartData"
              [labels]="doughnutChartLabels"
              [options]="doughnutChartOptions"
              [plugins]="doughnutChartPlugins"
              [legend]="doughnutChartLegend"
              [type]="doughnutChartType"
            >
            </canvas>
          </div>
        </div>
      </div>

In the TS file I've imported the pluginDataLabels as well as other types as follows:

import {
  ChartConfiguration,
  ChartDataset,
  ChartOptions,
  ChartType,
} from "chart.js";
import * as pluginDataLabels from "chartjs-plugin-datalabels";

and then I've tried like that:


 public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
    responsive: true,
    plugins: {
      datalabels: {
        display: true,
        anchor: 'center',
        align: 'center',
        font: {
          size: 20,
        },
        color: "#000000"
      },
      tooltip: {
        enabled: true,
      },
      title: {
        display: true,
        text: 'Macros'
      },
      legend: {
        display: true,
      },
    },
  };

  // public doughnutChartOptions: ChartOptions = {
  //   responsive: true,
  //   plugins: {
  //     datalabels: {
  //       color: "#36A2EB",
  //       display: true,
  //       anchor: "end",
  //       align: "end",
  //       font: {
  //         size: 20,
  //       },
  //     },
  //   },

  public doughnutChartLabels: string[] = ["Proteins", "Carbohydrates", "Fats"];
  public doughnutChartType: ChartType = "doughnut";
  public doughnutChartLegend: boolean = true;
  public doughnutChartPlugins = [pluginDataLabels];
  public doughnutChartData: ChartDataset[] = [
    {
      label: "Example",
      data: [33, 44, 55],
      datalabels: {
        color: "#36A2EB",
        display: true,
      },
    },
  ];

  constructor() {}

  ngOnInit(): void { }

But nothing seems to work.. When I use the old versions and follow the example above, all works but I want to do it with the newer version.. Any suggestions what I am doing wrong?

CodePudding user response：

You dont register the plugin as described in the documentation

import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);