cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
Introduction
In this post we will explain how to change the color of the data bars in a widget
Purpose/Benefits
Adjust bar colors according to your need
Example
Steps
Step 1:
Create Pivot table and enable data bars on the measure field.
Step 2:
Open the widget script editor, copy and paste the following code there.
widget.on('ready', function(se, ev){
    
    $('.bar', element).css('background-color', 'red');
})
Step 3:
Hit Save.  Refresh the page.  Hit Apply.  
Enjoy!
For multiple pivot table columns with data bars and a different color for each, please use the following script:
widget.on("ready",function(se,ev){
$(".databar[fidx=2] .bar-container .bar").css('background-color', 'red');
$(".databar[fidx=3] .bar-container .bar").css('background-color', 'blue');
});
Update the value for fidx to the index of your column. Columns are 0-indexed. For example, to modify the data bar in the fourth column of your pivot table, use fidx=3.
Rate this article:
Version history
Last update:
‎03-02-2023 09:22 AM
Updated by:
Contributors