Colored labels in table

[HQ_Dev_Prod]

I'm having an issue with the widget script to color the labels in a table created by @harikm007 in a previous post. 

https://community.sisense.com/t5/build-analytics/colored-labels-in-table-widget/m-p/10780

I have successfully been able to implement the script. However, the color flashes quickly when I load the dashboard then disappears. 

Any reason why or if I have to change the script? 

[DRay]

Hi @HQ_Dev_Prod,

Thank you for reaching out. Can you share your widget script? We can take a look at it and provide feedback.

Thank you.

[HQ_Dev_Prod]

Hi @DRay 

Here is the widget script. I'm assuming I can add all columns in columnsIndex where I want the coloring to show. 

widget.on('domready', function(se, ev){
	
	let columnsIndex = 2
	
	let itemStyleMapping = {
		'Very High Risk':'background-color:#B22222; color:white; padding: 2px 8px; border-radius:15px',
		'High Risk':'background-color:#FF6347; color:white; padding: 2px 8px; border-radius:15px',
		'Med Risk': 'background-color:#FFD166; color:white; padding: 2px 8px; border-radius:15px',
		'Low Risk': 'background-color:#90EE90; color:white; padding: 2px 8px; border-radius:15px',
		'Very Low Risk': 'background-color:#2E8B57; color:white; padding: 2px 8px; border-radius:15px',
		'No risk score': 'background-color:#D3D3D3; color:white; padding: 2px 8px; border-radius:15px'
	}
	const elementToObserve = $('table tbody', element)[0];
	
	$(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).each(function(index, value){
		var label = $(this).text()
		
		if(label in itemStyleMapping)
		{
			$(this).text('')
			$(this).prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
		}
						
	})
	
	const observer = new MutationObserver(function(e) {
		for(const m of e) {
			if (m.type === 'childList') {
				$.each(m.addedNodes, function(index, value){

					elementObj = $(value).find('td:nth-child(3)')
					var label = elementObj.text()

					if(label in itemStyleMapping)
					{
						elementObj.text('')
						elementObj.prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
					}
				})
			}
		}
	})
										  
	observer.observe(elementToObserve, {subtree: true, childList: true});

})