The "plugins" property is not assigned when creating the Chart object

[sgomanf]

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Queue Time for Review
Without PRO Support: ~8-12 weeks.
With PRO Support: 1 hour

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/github/primefaces/primeng-issue-template

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• **Angular version: 12.2.7

• **PrimeNG version: 12.1.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

in this poprtion of code:

https://github.com/primefaces/primeng/blob/master/src/app/components/chart/chart.ts#:~:text=this.chart%20%3D%20new,%7D)%3B

must be

    this.chart = new Chart(this.el.nativeElement.children[0].children[0], {
        type: this.type,
        plugins: this.plugins,
        data: this.data,
        options: this.options
    });

[s4m0r4m4]

I've run into this same problem - plugins are no longer registered when you bind them to the plugins input.

[s4m0r4m4]

I submitted a fix, hopefully we can get it reviewed @yigitfindikli

[flexadecimal]

Seconded. c07677f#r57613082

[pjlamb12]

@sgomanf @s4m0r4m4 Do either of you happen to have an example of plugins working on a chart? I've tried to get it working, but to no avail. I'm passing in an array of plugins to the p-chart component through the plugins input:

import * as ChartjsPluginDatalabels from 'chartjs-plugin-datalabels';

public plugins: any[] = [ChartjsPluginDatalabels];

But I'm not even sure this is what I'm supposed to pass in. I also tried passing in an array like this:

[
	{
		datalabels: {
			color: 'black',
			backgroundColor: 'white',
			anchor: 'end',
			align: 'right',
			offset: '-14',
			opacity: 0.8,
			borderRadius: 5,
			formatter: function (value, context) {
				return new CurrencyPipe('en').transform(value, 'USD', 'symbol', '1.0-0');
			},
		},
	},
]

This also didn't work.

[sgomanf]

This work for me:

import ChartDataLabels from 'chartjs-plugin-datalabels';

export class LineChartComponent {

   plugins = [ChartDataLabels];

    options: any = {
      legend: {
        display: true,
        position: 'top',
      },
      plugins: {
        datalabels: {
          display: true,
        },
      },
    };

 data$ = of({
    labels: [],
    datasets: [{
        label: '....',
        stack: '0',
        data: [.....],
        fill: false,
        borderColor: '#4bc0c0',
        backgroundColor: '#42A5F5',
    }]
 })

 constructor()

}

component template:

<p-chart type="line" [data]="data$ | async" [plugins]="plugins">

[Predoh1709]

ChartDataLabels worked the way you explained, but would you be able to do the same using this plugin? https://www.npmjs.com/package/chart.js-plugin-labels-dv

I tried several ways and couldn't get a result.