How to apply color to 'Break by' legends based on another column.

Question

Currently I have around 40 items in 'Break By' legend. I want to apply color based on their category (4 category - 4 color)

RAPID BI Support · Accepted Answer

Hey merinsverghese , There are a few ways to do this (like sending additional jaql queries in the widget script, but I think the more simple and efficient way is below (despite feeling a bit more hacky): In the datamodel, you'll need to create a new column indicating the grouping "_" to use as the break_by: Then we can create 'colorConfiguration' based on the text for each value before the '_'. We'll assign each unique category a color based on the dashboard pallette (colors) and th...

RAPID BI Support · Answer

Hi merinsverghese ,

You could do something like this on a widget script:

let colorConfiguration = [
	{ 
		category: 'a',
		seriesNames: ['Bikes', 'Body Armor', 'Build Kits', 'Cables &amp; Housing'],
		groupColor: 'blue'
	},
	{ 
		category: 'b',
		seriesNames: ['Frames', 'Helmets', 'Wheels &amp; Wheelsets'],
		groupColor: 'red'
	}
]

widget.on('processresult', (w, args) => {
  let l = args.result.series.length
  let l2 = colorConfiguration.length
  for (let i = 0; i < l; i++) {
    let bar = args.result.series[i]
	
	for (let j = 0; j < l2; j++) {
	  let colorConfigRule = colorConfiguration[j]
	  if (colorConfigRule.seriesNames.includes(bar.name)) { 
	    bar.color = colorConfigRule.groupColor
		bar.data.forEach((d) => { 
			d.color = colorConfigRule.groupColor
			d.borderColor = 'black'
			d.borderWidth = 1
		})
	  }
	}
	
  }
 
})

You can add to the colorConfiguration in the script to add different groups of breakby categories to color by.

Additionally, youi can set different colors for the column bar borders by adjusting borderColor lower in the script.

This results in:

Let me know how you go?

Thanks,

Daniel

RAPID BI

daniel.ranisavljevic@rapidbi.com.au

RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

category	Item
a	1
b	2
b	3
a	4
c	5
c	6
c	7