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 . `

{{data.title}} Date And Time Filters Today so far Past 7 days Past 30 days All Time

{{data.title}}

{{returnSum() | currency :"R"}}

▲ 57.1%

    <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.odate.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.odate.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.odate.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.odate.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; }

}`