Sunday, 2 July 2023

How to position positive value on top and negative value on bottom of stacked bar in chart js

The formatter function gives me the total of each group of stacked bars, I am trying to do the datalabels positioning it up if the total is positive and positioning it down if it is negative. Please any help would be very grateful.

enter image description here

datalabels: {
    anchor: (context) =>{
        const anchor = [];
        let sum = ?;
        
        if(parseFloat(sum) >=0){
            anchor.push('end');
        }else{
            anchor.push('start');
        }
        return anchor;
    },
    align: (context) =>{
        const align = [];
        let sum = ?;

        if(parseFloat(sum) >=0){
            align.push('end');
        }else{
            align.push('bottom');
        }
        return align;

    },
    formatter:(value, context) =>{
        const datasetArray = [];
        context.chart.data.datasets.forEach((dataset) =>{
            if(dataset.data[context.dataIndex] != undefined){
                datasetArray.push(dataset.data[context.dataIndex]);
            }
            
        });
        
        function totalSum(total, datapoint){                                           
            return +total + +datapoint;
        }
        
        let sum = datasetArray.reduce(totalSum);
        if(context.datasetIndex === datasetArray.length - 1){
            return parseFloat(sum).toFixed(2) ;
        }else{
            return '';
        }
    },
}


from How to position positive value on top and negative value on bottom of stacked bar in chart js

No comments:

Post a Comment