Custom sort for Bar and Column Chart
Custom sort for Bar and Column Chart
Question:
I have seen several posts of people asking if there is a simple way to apply custom sorts for car and column charts, and until recently, I have been using the community customBarColumnChart Plugin, which is not supported anymore, and also not working correctly in the latest version of Sisense cloud. Not sure why this cannot become a standard feature within the system, as there seem to be a lot of requests for this functionality.
Answer:
The following widget scripts will allow you to sort categories in a bar/column chart. You can change the order of items in sortOrder to change the order. They cater to when you want to sort by a Break By, or when you want to sort by Categories with no Break By.
BREAK BY:
widget.on('processresult', (w, args) => {
var sortOrder = ['Yellow', 'Black', 'Red', 'Blue ', 'Gold', 'Silver']
args.result.series.sort(function (a, b) {
return sortOrder.indexOf(a.name) - sortOrder.indexOf(b.name)
})
})
The configuration is also attached in a screenshot below:
ALT Text: A bar chart displaying total order quantities by region. Two regions are represented: Europe and USA. Each region has bars segmented by color: yellow, blue, black, gold, red, and silver. The chart highlights comparisons in order quantities between the two regions, with specific quantities not indicated in the image.
CATEGORIES:
If you're aiming to sort by the Categories directly, then you can use the following instead:
widget.on('processresult', (w, args) => {
var sortOrder = ['USA', 'Europe']
args.result.series[0].data.sort(function (a, b) {
return sortOrder.indexOf(a.selectionData[0]) - sortOrder.indexOf(b.selectionData[0])
})
args.result.xAxis.categories.sort(function (a, b) {
return sortOrder.indexOf(a) - sortOrder.indexOf(b)
})
})
This configuration looks like this:
ALT text: Bar chart comparing total order quantity between the USA and Europe. The USA has a higher total order quantity than Europe, with both categories represented in dark blue bars on a white background.
This was tested using Sample Retail.
Let me know how it goes for you in the comments!
Check out this related content:
Academy
Documentation
