chartjs-plugin-labels not working on angular 8

[satyanarayan18]

Hi,

We have recently upgraded to Angular 8 and Primeng packages which earlier use charts.js and piece label.js to display the value on the chart.

As I came to know that piece label. js has renamed to chartsjs-plugin-labels so I did the changes accordingly and it starts working on the development machine however when I build the angular app in the production configuration then it's not working and I am not able to figure out the root cause for the issue.

Any pointer or guidance to look for the issue is highly appreciated.

[alyleite]

Hi,

We have recently upgraded to Angular 8 and Primeng packages which earlier use charts.js and piece label.js to display the value on the chart.

As I came to know that piece label. js has renamed to chartsjs-plugin-labels so I did the changes accordingly and it starts working on the development machine however when I build the angular app in the production configuration then it's not working and I am not able to figure out the root cause for the issue.

Any pointer or guidance to look for the issue is highly appreciated.

try this
stackoverflow

and add

plugins: { labels: { render: args => { return args.value + '%'; }, fontColor: 'white', precision: 0 } }

[theFallen78]

@alyleite the above solution did not work for me.
everything works fine in development but when i try to run
ng build --prod the labels wont work .

do you have a link to stackblizt
where you got it to work

[craigyg121]

@theFallen78 - I have the exact same issue in regards working in development, but not when running with --prod. The only difference is that I am using Angular 9.1.

Did you mange to get this working?

[craigyg121]

@theFallen78 - I have the exact same issue in regards working in development, but not when running with --prod. The only difference is that I am using Angular 9.1.

Did you mange to get this working?

I just did one more test and fixed it.
I have imported in angular.json - chartjs-plugin-labels.js

Also added
import 'chartjs-plugin-labels'; to app.module

[juntaforce]

It's same with Angular 8
I added angular.json and appmodule.ts as
import 'chartjs-plugin-labels';

But it is still not working with --prod.
Someone who solved this issue??

[apoorv-dodiya-tibilsolutions]

In my case it is not working in any case though I am using chart.js module instead of ng2-charts I am not sure that it should work or not?! Is anyone else using with chart.js package?

[theFallen78]

@craigyg121 ,
not sure if this will help anyone .
`

        <i 
        class = "text-gray-800 absolute top-0 right-0 mt-4 mr-4 text-xl bg-white rounded-full  z-10"
         [nbPopover]="list"
         [nbPopoverPlacement]="'bottom'"
         [nbPopoverTrigger]="'click'"><nb-icon style = "font-size: 1.7em !important;" icon="arrow-circle-down-outline"></nb-icon></i>
         <ng-template #list>
            <nb-card class="margin-bottom-0">
              <nb-card-header>{{data.title}} Date And Time Filters </nb-card-header>
              <nb-list>
                <nb-list-item (click) = "returnToday()" class = "hover:bg-gray-100 text-gray-800 cursor-pointer">
                 
                    <span class="text-sm  font-medium mr-auto">Today so far </span>
                    
                </nb-list-item>
                <nb-list-item (click) = "returnWeek()" class = "hover:bg-gray-100 text-gray-800 cursor-pointer">
                 
                    <span class="text-sm text-gray-800 font-medium mr-auto">Past 7 days </span>
                    
                </nb-list-item>
                <nb-list-item (click) = "returnMonth()" class = "hover:bg-gray-100 text-gray-800 cursor-pointer">
                 
                    <span class="text-sm text-gray-800 font-medium mr-auto">Past 30 days </span>
                    
                </nb-list-item>
                    <nb-list-item (click) = "returnAllTime()" class = "hover:bg-gray-100 text-gray-800 cursor-pointer">
                 
                    <span class="text-sm text-gray-800 font-medium mr-auto">All Time</span>
                    
                </nb-list-item>
              </nb-list>
            </nb-card>
          </ng-template>
        <p class="text-sm uppercase text-gray-500 leading-tight w-full">{{data.title}}</p>

        <span class="text-3xl text-gray-700 font-semibold leading-tight my-3">{{returnSum() | currency :"R"}}</span>
        <p class="text-xs text-green-500 leading-tight">▲ 57.1%</p>
    </div>
    <div class="absolute bottom-0 inset-x-0 -mb-2 -ml-4">
        <!--<canvas id="chart1" height="70"></canvas>-->
        
        <canvas baseChart  height="70"
        [datasets]="lineChartData"
        [labels]="lineChartLabels"
        [options]="lineChartOptions"
        [colors]="lineChartColors"
        [legend]="lineChartLegend"
        [chartType]="lineChartType"
        [plugins]="lineChartPlugins">
      </canvas>
  
    </div>
</div>`

--component.ts
`import { Component, Input, OnInit } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Label, Color } from 'ng2-charts';
import * as _ from "lodash";

@component({
selector: 'app-small',
templateUrl: './small.component.html',
styleUrls: ['./small.component.css']
})
export class SmallComponent implements OnInit {
@input() data:any;
today = new Date()
public lineChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
];
public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartOptions: (ChartOptions & { annotation: any }) = {

annotation:0,
maintainAspectRatio: false,
legend: {
    display: false,
},
tooltips: {
    enabled: false,
},
elements: {
    point: {
        radius: 0
    },
},
scales: {
    xAxes: [{
        gridLines: {display: false},
        scaleLabel: {display: false},
        ticks: {
            display: false
        }
    }],
    yAxes: [{
        
        gridLines: {display: false},
        scaleLabel: {display: false},
        ticks: {
            display: false,
            suggestedMin: 0,
            suggestedMax: 10
        }
    }]
}

};
public lineChartColors: Color[] = [
{
backgroundColor: "rgba(101, 116, 205, 0.1)",
borderColor: "rgba(101, 116, 205, 0.8)",
}
];
public lineChartLegend = true;
public lineChartType = 'line';
public lineChartPlugins = [];

constructor() { }

ngOnInit() {
this.lineChartColors = [this.data.colors];
//this.data.orders = .orderBy()
this.returnMonth();
//console.log(this.data)
}
returnToday(){
let carts = [];
let orders = .filter(this.data.orders,o =>{
if(o.o_date.toDate().toDateString() == this.today.toDateString()){
if(.toLower(this.data.title) == "profits"){
carts.push(this.profitCalculator(o.cart));
}
if(.toLower(this.data.title) == "revenue"){
carts.push(this.revenueCalculator(o.cart));
}

    return true
  }
  else{
    return false;
  }
})
this.lineChartData[0].data = carts;
this.lineChartLabels = _.fill(_.range(0,carts.length), "");
//console.log(carts,orders)

}
returnWeek(){
let date = new Date();
let carts = [];
let orders = .filter(this.data.orders,o =>{
if(date.setDate(date.getDate() - 7) < o.o_date.toDate()){
if(.toLower(this.data.title) == "profits"){
carts.push(this.profitCalculator(o.cart));
}
if(_.toLower(this.data.title) == "revenue"){
carts.push(this.revenueCalculator(o.cart));
}

    return true
  }
  else{
    return false;
  }
})
this.lineChartData[0].data = carts;
this.lineChartLabels = _.fill(_.range(0,carts.length), "");
//console.log(carts,orders)

}
returnMonth(){
let date = new Date();
let carts = [];
let orders = .filter(this.data.orders,o =>{
if(date.setDate(date.getDate() - 30) < o.o_date.toDate()){
if(.toLower(this.data.title) == "profits"){
carts.push(this.profitCalculator(o.cart));
}
if(_.toLower(this.data.title) == "revenue"){
carts.push(this.revenueCalculator(o.cart));
}

    return true
  }
  else{
    return false;
  }
})
this.lineChartData[0].data = carts;
this.lineChartLabels = _.fill(_.range(0,carts.length), "");
//console.log(carts,orders)

}
returnAllTime(){
let date = new Date(2018,1,1)
let carts = [];
let orders = .filter(this.data.orders,o =>{
if(date < o.o_date.toDate()){
if(.toLower(this.data.title) == "profits"){
carts.push(this.profitCalculator(o.cart));
}
if(_.toLower(this.data.title) == "revenue"){

      carts.push(this.revenueCalculator(o.cart));
    }
    
    return true
  }
  else{
    return false;
  }
})
this.lineChartData[0].data = carts;
this.lineChartLabels = _.fill(_.range(0,carts.length), "");
//console.log(carts,orders)

}

returnSum(){
return _.sum(this.lineChartData[0].data);
}
profitCalculator(cart){
let sum = 0;
_.forEach(cart,product=>{
sum += ((product.price * ((product.mark/100) - (product.discount/100)) )*product.qty)
})
return sum;
}
revenueCalculator(cart){
let sum = 0;
_.forEach(cart,product=>{
sum += ((product.price * ((product.mark/100) + (1) - (product.discount/100)) )*product.qty) * 1.15
})
return sum;
}

}`