Stack 100 Bar Chart - How to Add Percentage of Total (Contribution) to Value Labels

[Liliia_DevX]

Stack 100 Bar Chart - How to Add Percentage of Total (Contribution) to Value Labels

This article provides an example solution on how to add a percentage of the total (Contribution) to the data labels in the stack 100 bar chart. 

How to use it?

1. Open a widget in edit mode by pressing the pencil icon. 
2. Click the three dots menu and choose "Edit Script."
3. Copy and paste the following script into the "Edit Script" section and press "Save."

widget.on('processresult', (scope, args)=>{


// Uncomment in order to show labels inside of the bar
/*
    args.result.yAxis[0].stackLabels.crop = false
    args.result.yAxis[0].stackLabels.overflow = 'justify'

*/

	
	//change margin, order is [top, right, bottom, left]
args.result.chart.margin = [100,100,100,100]


args.result.yAxis[0].stackLabels.formatter = function(){

let totals = []
this.axis.series.forEach(s => {
totals.push(s.yData.reduce((partialSum, a) => partialSum + a, 0))
})
let total = totals.reduce((partialSum, a) => partialSum + a, 0);
const compactFormatter = Intl.NumberFormat('en-US', {
  notation: "compact",
  maximumFractionDigits: 1
})

return compactFormatter.format(this.total) + ' | ' + (this.total / total * 100).toFixed(1) + '%'
}

})

Feel free to adjust it to your needs and share your experience with us!

Disclaimer: Please note that this blog post contains one possible custom workaround solution for users with similar use cases. We cannot guarantee that the custom code solution described in this post will work in every scenario or with every Sisense software version. As such, we strongly advise users to test solutions in their own environment prior to deploying them to ensure that the solutions proffered function as desired in their environment. For the avoidance of doubt, the content of this blog post is provided to you “as-is” and without warranty of any kind, express, implied, or otherwise, including without limitation any warranty of security and or fitness for a particular purpose. The workaround solution described in this post incorporates custom coding, which is outside the Sisense product development environment and is, therefore, not covered by Sisense warranty and support services.