Chart.js does not call plugins.datalabels.formatter() in my Ionic 4 / Angular application

限于喜欢 提交于 2019-12-25 00:23:51

问题


I wish to draw the percentages on the pie pieces of a Chart.js pie chart, in my Ionic 4 / Angular application.

My Chart.js version is 2.8.0

I have the following code I found here, where I can see it works. But when I add it, my formatter() is just not called (I have added a breakpoint and it is just not called)

        public ngOnInit() : void {
        this.data = {
          datasets: [{
            data: [10, 20, 30, 50],
            backgroundColor: [
              'green',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
          }],

          labels: [
            'Red',
            'Yellow',
            'Blue',
            'another'
          ]
        };

        let options = {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            position: 'bottom',
            boxWidth:10
          },
          tooltips: {
            enabled: false
          },
          plugins: {
            datalabels: {
              formatter: (value, ctx) => { // this is never called
                return 'hello';
                let sum = 0;
                let dataArr = ctx.chart.data.datasets[0].data;
                dataArr.map(data => {
                  sum += data;
                });
                let percentage = (value * 100 / sum).toFixed(2) + "%";
                return percentage;


              },
              color: 'black',
            }
          }
        };
        this.chart = new Chart(this.chartRef.nativeElement, { 
          type: 'pie',
          data: this.data,
          options: options
        });
      }

Would anyone have any idea why this is not working for me. Apart from that, most other things on the charts seem to work fine.

Thanks in advance for any help.

来源:https://stackoverflow.com/questions/55590516/chart-js-does-not-call-plugins-datalabels-formatter-in-my-ionic-4-angular-ap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!