I am building a dashboard in Sisense, and have been tasked with the request to have the dashboard have dark mode version. On the right of all of my Blox widgets there is a white bar that I cannot remove. Does anyone know how to remove the bar in the attached image? Below is my widget script, and the configuration for the blox widget.
Image:
![]()
Editor for Blox:
{
"style": "",
"script": "",
"title": "",
"titleStyle": [
{
"display": "none"
}
],
"showCarousel": false,
"body": [],
"actions": [
{
"type": "JTD",
"title": "NPS History",
"data": {
"dashboardId": "6303e1af1adcdf00397d2b3c",
"args": {
"displayDashboardsPane": false,
"displayFilterPane": false,
"drilledDashboardDisplayType": 2
}
}
}
]
}
Configuration for blox:
{
"fontFamily": "Open Sans",
"fontSizes": {
"default": 14,
"small": 16,
"medium": 20,
"large": 50,
"extraLarge": 32
},
"fontWeights": {
"default": 500,
"light": 100,
"bold": 1000
},
"containerStyles": {
"default": {
"backgroundColor": "#000000",
"foregroundColors": {
"default": {
"normal": "#000000"
},
"white": {
"normal": "#ffffff"
},
"grey": {
"normal": "#5C6372"
},
"orange": {
"normal": "#f2B900"
},
"yellow": {
"normal": "#ffcb05"
},
"black": {
"normal": "#000000"
},
"lightGreen": {
"normal": "#3ADCCA"
},
"green": {
"normal": "#54a254"
},
"red": {
"normal": "#dd1111"
},
"accent": {
"normal": "#2E89FC"
},
"good": {
"normal": "#54a254"
},
"warning": {
"normal": "#e69500"
},
"attention": {
"normal": "#cc3300"
}
}
}
},
"imageSizes": {
"default": 40,
"small": 40,
"medium": 80,
"large": 160
},
"imageSet": {
"imageSize": "medium",
"maxImageHeight": 100
},
"actions": {
"color": "white",
"backgroundColor": "#54a254",
"maxActions": 5,
"spacing": "extraLarge",
"buttonSpacing": 20,
"actionsOrientation": "horizontal",
"actionAlignment": "center",
"showCard": {
"actionMode": "inline",
"inlineTopMargin": 16,
"style": "default"
}
},
"spacing": {
"default": 5,
"small": 20,
"medium": 60,
"large": 20,
"extraLarge": 40,
"padding": 0
},
"separator": {
"lineThickness": 1,
"lineColor": "#eeeeee"
},
"factSet": {
"title": {
"size": "default",
"color": "default",
"weight": "bold",
"warp": true
},
"value": {
"size": "default",
"color": "default",
"weight": "default",
"warp": true
},
"spacing": 20
},
"supportsInteractivity": true,
"imageBaseUrl": "",
"height": 63
}
Widget Script:
/*
Welcome to your Widget's Script.
To learn how you can access the Widget and Dashboard objects, see the online documentation at https://sisense.dev/guides/js/extensions
*/
widget.on('ready', function(se, ev){
$(element).css('background-color','#000000'); //changes the widget's background
$('widget-header' ,element).css('background-color','#000000'); //changes the widget's title background
})
widget.on('processresult', function(widget, query) {
opMap = widget.indicatorInstance._optionsMap["numericSimple"];
// Read Primary Title Text
console.log('Primary Title Caption: ' + query.result.title.text);
// Override Primary Title Color
opMap.title.color='white'
// Override Primary Title Font Size (see font section)
opMap.title.fontSizes["big"] = 20
// Override Primary Title Font Style
opMap.title.fontStyle = 'italic'
opMap.title.fontWeight = 'bold'
});
