Data label alignment issue

[Karthika-08]

Hi, I have an alignment issue in the data label of the stacked bar chart. When toggling legends, data labels getting overlap with the bar and also have alignment issues in the case of negative values.

Here is my code: plugins: {

  datalabels: {
   
    anchor:'end',
    align:  'top',
    color: '#737373',
    font: {
      weight: 'bold' 
    },
 offset: (value,ctx)=> {

      return '10'
   },
    formatter: (value, ctx) => {
    
      let datasets = ctx.chart.data.datasets.filter(
        (ds, datasetIndex) => ctx.chart.isDatasetVisible(datasetIndex)
      )
  
      if (ctx.datasetIndex === datasets.length - 1 ) {
       
        let sum = 0;
        datasets.map(dataset => {
          sum += dataset.data[ctx.dataIndex];
        });
        if(sum >0){
          return '$'+Math.round(sum);
        }else{
          return '-$'+Math.round(Math.abs(sum));
        }
        
      }
      else {
        return '';
      }
    }
    },
   
  }
},

Any help would be greatly appreciated! Thanks!

[alinesouzadev]

Try to update this datalabels info to: datalabels: { align: "start", anchor: "start"}

[Karthika-08]

Try to update this datalabels info to: datalabels: { align: "start", anchor: "start"} I have already tried it,but not working

[simonbrunel]

@Karthika-08 If you still need support on your issue, please provide a CodePen (or similar) that reproduces your problem.