Skip to main content

chartjs-plugin-datalabels not showing values on chartjs

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 class="container">
        <div class="row">
          <div class="col-sm-6">
            <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?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/z3NtFJc
Labels:

Comments

Post a Comment

Popular posts from this blog

Confusion between commands.Bot and discord.Client | Which one should I use?

Whenever you look at YouTube tutorials or code from this website there is a real variation. Some developers use client = discord.Client(intents=intents) while the others use bot = commands.Bot(command_prefix="something", intents=intents) . Now I know slightly about the difference but I get errors from different places from my code when I use either of them and its confusing. Especially since there has a few changes over the years in discord.py it is hard to find the real difference. I tried sticking to discord.Client then I found that there are more features in commands.Bot . Then I found errors when using commands.Bot . An example of this is: When I try to use commands.Bot client = commands.Bot(command_prefix=">",intents=intents) async def load(): for filename in os.listdir("./Cogs"): if filename.endswith(".py"): client.load_extension(f"Cogs.{filename[:-3]}") The above doesnt giveany response from my Cogs ...
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more