cancel
Showing results for 
Search instead for 
Did you mean: 

Set Opacity of columns in a column chart

Silutions
10 - ETL
10 - ETL

Anyone have a script to do this?

I've tried the script below but it does not function for series0 on my widget:

widget.on("beforeviewloaded", function(w, args){
args.options.series[0].fillOpacity: 0.5
}
);
 
I've also tried just "opacity" without success.  Works on the HightCharts demo, but not in Sisense.
Grateful for any assistance., Jim
2 ACCEPTED SOLUTIONS

harikm007
13 - Data Warehouse
13 - Data Warehouse

@Silutions Here is an alternate way to set opacity of column/bar chart

 

widget.on('ready', function(se,ev){
	
 opacity = '0.3'

 $('.highcharts-series-group .highcharts-series', element).css('fill-opacity', opacity) //change opacity of bars
 $('.highcharts-legend .highcharts-legend-item', element).css('fill-opacity', opacity) //change opacity of legend

});

 

 

View solution in original post

harikm007,

Works like a champ.  Thanks so much.

Regards, Jim

View solution in original post

6 REPLIES 6

harikm007
13 - Data Warehouse
13 - Data Warehouse

@Silutions Here is an alternate way to set opacity of column/bar chart

 

widget.on('ready', function(se,ev){
	
 opacity = '0.3'

 $('.highcharts-series-group .highcharts-series', element).css('fill-opacity', opacity) //change opacity of bars
 $('.highcharts-legend .highcharts-legend-item', element).css('fill-opacity', opacity) //change opacity of legend

});

 

 

harikm007,

Works like a champ.  Thanks so much.

Regards, Jim

@harikm007 how do you apply the opacity to only the chart and now the data label?

harikm007
13 - Data Warehouse
13 - Data Warehouse

@cartercjb ,

Please try this updated script

widget.on('ready', function(se,ev){
	
 opacity = '0.3'

 $('.highcharts-series-group .highcharts-series rect', element).css('fill-opacity', opacity) //change opacity of bars
 $('.highcharts-legend .highcharts-legend-item rect', element).css('fill-opacity', opacity) //change opacity of legend

});

-Hari

Thanks, Hari @harikm007 . Just curious, what does the "rect "mean that you added? 

harikm007
13 - Data Warehouse
13 - Data Warehouse

@cartercjb ,

'rect' is an element in SVG used to create rectangle. In above script we are applying opacity only to the rectangle, not labels.

harikm007_0-1650469483188.png

-Hari