canvas - Custom DataLabels in Chart.js

Question

I'm trying to custom my datalabels using Chartjs, but I only can customize the returning value, and that makes sense since it's a canvas text. But anyone knows another solution to have customized datalabels (with html/css or fancy canvas options)?

I'm currently using formatter

 options: {
    plugins: {
      datalabels: {
        display: 'auto',
        align: 'end',
        anchor: 'end',
        clip: false,
        formatter: (value, config) => {           
          if(this.chartFormat === "percentage")
            return ((value * 100) / this.totalModels).toFixed(0) + '%' + ' | ' + config.chart.data.labels[config.dataIndex]

          return value;
        },
        color: '#000'
      },
    },

this is something like I trying to do

Thanks.

question from:https://stackoverflow.com/questions/66065220/custom-datalabels-in-chart-js

Answer 1

Waitting for answers