Changing a Widget's Background Color



  • Avatar
    Nick Burleigh

    This is great, thank you! However, even in your example the widget's header did not change color. I am finding the same thing in my implementation. Is there a fix for this?

  • Avatar
    Glenys Salas

    Hi - I found the same thing please let us know.  Thanks!

  • Avatar
    Simon Vosloo

    Hi Guys

    I have just upgraded to version 6.6.1

    The background directly behind the text in a widget does not change colour now. Although closer to the edge of the widget it does change colour. Please see below:

    Neither of the codes below seem to work:

    widget.on('ready', function(se, ev){
    $(element).css('background-color','#f5f5f5'); //changes the widget's background
    $('widget-header' ,element).css('background-color','#f5f5f5'); //changes the widget's title background

    widget.on('ready', function(se, ev){
    if (window.navigator.userAgent.indexOf('phantom') == -1)
    $(element).css('background-color','#f5f5f5'); //changes the widget's background
    $('widget-header' ,element.parent()).css('background-color','#f5f5f5'); //changes the widget's title background

  • Avatar
    shani adani (Edited )

    Hi Simon, 

    Since version 6.6.1, indicator widgets are generated using SVG instead of canvas and can be styled using the Indicator Theme plugin. In order to style indicators: 

    1. Download Indicator Theme  from Sisense Plugins list and unzip the file into your plugins folder. 
        The zip file contains a plugin called "indicatorTheme" and a resource folder for images that can be in use in        indicators.

    2. For each indicator you wish to style, add the below widget script:

    widget.on('domready', function (w) {

        var instance = w.indicatorInstance;
        var options = {
                   backgroundColor: 'rgb(163, 73, 164)',
                   color: 'white'

       var canvas = instance.getCanvas();
       var context = canvas.getContext("2d");
       context.clearRect(0, 0, canvas.width, canvas.height);

       var indicatorTheme = new prism.IndicatorTheme('booking.png', options);

       instance.setRendererFunc(instance.type, indicatorTheme.render.bind(indicatorTheme));


  • Avatar
    Glenys Salas

    Hi!  Two issues:

    1. If there is no image in the sub-folder, the background color doesn't work

    2. There is no font size customization.

    Any chance you could release updated scripts to get to that level of customization.  We are stuck in 6.6.1 until we can get a work around.

  • Avatar
    Oxana Noa Umansky

    Hi Glenys,

    After discussing your request with our Professional Services team, here is how we can help:

    1) To make this work, please leave the place where the image is set to an empty string (please see the example below): 

    // The first parameter is the url of the image to add to the indicator. The image should be placed under: /plugins/Resources/logo
    // In case its not relevant set as an empty string
     var indicatorTheme = new prism.IndicatorTheme('booking.png', options); 

    2) Great suggestion on customizing the font size! Unfortunately, further customization of this plugin require our Professional Services team attention.

    Therefore, I recommend reaching out to your Customer Success Manager, Korey Martin, and he'll be happy to assist you with your request. 

    Hope it helps. 




  • Avatar
    Erkan Çiftçi

    Hi, I tried to change the some charts and filter plugins background but there is gap backgrounds between textbox and filter plugin like below.

    "Select KPI Type" is Filter Plugin

    "Company Overview & Benchmark" is a Textbox but as you can see there is gap bottom of the Textbox background color.

    We can't change/play the TextBox's script with Edit Script so that I need to play with the Filter plugin's background color which will be same alignment with the Textbox background color.

    How can I do that, can you please help about this JS script

    Filter plugin script :

    widget.on('ready', function(se, ev){
    $(element).css('background-color','#1972DB'); //changes the widget's background


Please sign in to leave a comment.