cancel
Showing results for 
Search instead for 
Did you mean: 

Gradient color in bar/column/line/area chart

harikm007
12 - Data Integration
12 - Data Integration

Below script will add gradient color to widget. Supported widget types are bar chart, column chart, line chart and area chart

harikm007_1-1651083898891.png

Steps:

 
  1. Create bar/column/line/area chart

  2. Add below widget script and update the variable 'color1' with any color you need to add as gradient. Primary color is the color you selected in Sisense value/breakby panel.

  3. Save the script and refresh widget

 

 

widget.on('processresult', function(se,ev){
	
	var color1 = '#3399ff'
	
	$.each(ev.result.series, function(seriesIndex, seriesValue){
		
		seriesValue.color = {
			linearGradient: {
				x1: 0,
				y1: 0,
				x2: 0,
				y2: 1
			},
			stops: [
				[0, seriesValue.color],
				[1, color1]
			]
		}
		
		$.each(seriesValue.data, function(index, value){
			value.color = seriesValue.color
		})	
	})
})

 

Reference - https://www.binextlevel.com/post/gradient-color-in-bar-column-line-area-chart

To apply gradient color to pie chart, refer https://www.binextlevel.com/post/gradient-color-in-pie-chart

-Hari

 

0 REPLIES 0