ABP Framework version: v8.0.1 UI Type: Angular Database System: EF Core (PostgreSQL.) Tiered (for MVC) or Auth Server Separated (for Angular): yes Exception message and full stack trace: Steps to reproduce the issue: Hello, I'd like to ask for your support. According to the documentation on https://docs.abp.io/en/abp/8.0/UI/Angular/Chart-Component I have created a sample chart. It is plotted correctly. However, if I define my own plugin according to https://www.chartjs.org/docs/latest/api/interfaces/Plugin.html, none of the methods are called.
import { Component } from '@angular/core';
@Component({
selector: 'app-chart-demo',
template: `
<abp-chart
type="bar"
[data]="data"
width="400px"
height="400px"
[plugins]="plugins"
></abp-chart>
`,
})
export class BarChartComponent {
data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First dataset',
backgroundColor: '#42A5F5',
data: [65, 59, 80, 81, 56, 55, 40],
},
{
label: 'Second dataset',
backgroundColor: '#FFA726',
data: [28, 48, 40, 19, 86, 27, 90],
},
],
};
helloWorldPlugin = {
id: 'helloWorld',
beforeInit: (chart, args, options) => {
console.log(chart);
},
afterInit: (chart, args, options) => {
console.log(chart);
},
afterRender: (chart, args, options) => {
console.log(chart);
},
beforeDraw: chart => {
console.log(chart);
},
afterDraw: (chart, args, options) => {
console.log(chart);
},
};
plugins = [this.helloWorldPlugin];
}
Thank you in advance
5 Answer(s)
-
0
Hi, It might be related with version of chart.js.
in
@abp/ng.componentits installed version 3.9.1. So i wonder can you try to change your plugin according to version 3.9.1 of chart.js -
0
I apologize for the longer response time. I tried to modify the plugin according to the documentation https://www.chartjs.org/docs/3.9.1/developers/plugins.html, unfortunately without success. I am unable to trigger any events. Could you please provide an example of a plugin where, for instance,
beforeDraw: (chart, args, options) => { console.log(chart); }is executed? Thank you -
0
Hi stuchlajz, i have update the version of chart.js and make plugins work in abp. you can follow the pr https://github.com/abpframework/abp/pull/19314
By the way you have the change your plugin as follow;
helloWorldPlugin = [ { beforeInit: (chart, args, options) => { console.log('asd'); }, afterInit: (chart, args, options) => { console.log('after init'); }, afterRender: (chart, args, options) => { console.log('after render'); }, beforeDraw: chart => { console.log('before Draw'); }, afterDraw: (chart, args, options) => { console.log('afterDRaw'); }, }, ]; <abp-chart type="bar" [data]="data" width="400px" height="400px" [plugins]="helloWorldPlugin" ></abp-chart>It will be available in version 8.1 and i have refundend your question credit.
-
0
PR is merged. I am closing the ticket, if the problem continues in new version you can reopen.
-
0
Hi, I'll try it.
Thank you.
