Forum Discussion

wallingfordce's avatar
wallingfordce
Data Pipeline
05-17-2025

Gradient color in bar chart based on start/end text of value title

Searched and found Gradient color in bar/column/line/area chart - Sisense Community

Help always so appreciated!

Use case is having 5 levels of engagement where a customer could enter at any level and then be currently still at that level or at a deeper level. Each level has a color assigned. The values in the bar widget count the customers who entered at a given level and are currently at a given other level. The values are named {entryLevel} - {currentLevel}

For the value named "Level A - Level B" the bar would start at the color assigned for Level A and end at the color for Level B.

For a value named "Level B - Level E" the bar would start at the color for Level B and end at the color assigned for Level E.

Thanks in advance!

Dashboards & Reporting

13 Replies

  • wallingfordce's avatar
    wallingfordce
    Data Pipeline
    06-03-2025

    I don't have a solution, but this was also a nice-to-have. I can use the UI to select the target/ending color for each bar and leave the starting color out of it, and then document that.

    • DRay's avatar
      DRay
      Admin
      06-03-2025

      Should we ping harikm007 to see if he can respond to your last post about the seriesName?

      • wallingfordce's avatar
        wallingfordce
        Data Pipeline
        06-04-2025

        :) I don't want to pester someone who is and has been so giving of their time. The community notification of my response was sent, and my personal community platform etiquette assumes they either don't have time to respond or don't have a solution. 

  • harikm007's avatar
    harikm007
    Data Warehouse
    05-19-2025

    Hi wallingfordce ,

    Please try the below script and let me know if you are looking for something like this:

    widget.on('processresult', function(se,ev){
	
	var colorMapping = {
		'Level A': 'red',
		'Level B': 'green',
		'Level C': 'blue',
		'Level D': 'yellow'
	}
	
	$.each(ev.result.series, function(seriesIndex, seriesValue){
		
		$.each(seriesValue.data, function(index, value){
			
			const categoryName = value.selectionData[0];
			first_part = categoryName.includes('-') ? categoryName.split('-')[0].trim() : categoryName;
			second_part = categoryName.includes('-') ? categoryName.split('-')[1].trim() : categoryName;
			
			value.color = {
				linearGradient: {
					x1: 0,
					y1: 0,
					x2: 0,
					y2: 1
				},
				stops: [
					[0, (first_part in colorMapping ? colorMapping[first_part] : 'gray')],
					[1, (second_part in colorMapping ? colorMapping[second_part] : 'gray')]
				]
			}
			
			
		})	
	})
})

     

    - Hari

     

     

    • wallingfordce's avatar
      wallingfordce
      Data Pipeline
      05-19-2025

      Love that and looks like the right idea. Does it matter that I don't have a field on Categories or Break By, because I'm not seeing this have any effect, and throwing a console.log(categoryName) in there doesn't output anything.

       

      • harikm007's avatar
        harikm007
        Data Warehouse
        05-20-2025

        The script needs to be adjusted slightly if the Categories or Breakby fields are not present. Here's the updated version.

        widget.on('processresult', function(se,ev){
	
	var colorMapping = {
		'Level A': 'red',
		'Level B': 'green',
		'Level C': 'blue',
		'Level D': 'yellow'
	}
	
	$.each(ev.result.series, function(seriesIndex, seriesValue){
				
		const seriesName = seriesValue.name;
		first_part = seriesName.includes('-') ? seriesName.split('-')[0].trim() : seriesName;
		second_part = seriesName.includes('-') ? seriesName.split('-')[1].trim() : seriesName;
		
		$.each(seriesValue.data, function(index, value){
			
			value.color = {
				linearGradient: {
					x1: 0,
					y1: 0,
					x2: 0,
					y2: 1
				},
				stops: [
					[0, (first_part in colorMapping ? colorMapping[first_part] : 'gray')],
					[1, (second_part in colorMapping ? colorMapping[second_part] : 'gray')]
				]
			}
			
			
		})	
	})
})

         -Hari