I have an alignment issue in the data label of the stacked bar chart(react chart js version:2.9). 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 '';
      }
    }
    },
   
  }
}

 

[screenshot attached]


  [1]: https://ibb.co/t3t2PnP