cancel
Showing results for 
Search instead for 
Did you mean: 

Black background when data yields no results.

ascott011
8 - Cloud Apps
8 - Cloud Apps

Hi, I am trying to adjust my script so the black background continues to be black even when "No Results" are shown. Right now, I have a dashboard that has black background with white text, but the charts the don't yield any data at certain times revert to white backgrounds. Is there a way to make the background remain black when there are "No Results?"
code excerpt: 

// APPLY GLOBAL STYLES
dashboard.on('initialized', (dash) => {
const styles = `
body {
background-color: black !important;
}
widget-header {
background-color: black !important;
color: white !important;
}
.widget-title {
color: white;
}
.widget-body, .widget-empty, .widget-body .no-data {
background-color: black !important;
color: white !important;
}
.widget-chart-container, .widget-chart-container .no-data {
background-color: black !important;
color: white !important;
}
text, .no-data-text {
color: white !important;
font-size: 16px !important;
fill: white !important;
}
.x-axis text {
text-anchor: middle !important;
}
.pivot-container {
border: none !important;
}
.pivot-header, .pivot-cell, .pvtVal {
background-color: green;
}
.pivot-header, .pivot-cell, .table-grid_row {
color: white;
fill: white;
}
.table-grid.table-grid--fixed.table-grid--columns.table-grid--top.table-grid--right.active {
background-color: black !important;
}
.tablewidget-widget-content, .tablewidget-widget-content tr, div#grid_paginate {
background: black !important;
}
.tablewidget-widget-content tr th, .tablewidget-widget-content td {
color: white !important;
}
.tablewidget-widget-content tr:hover td {
color: black !important;
}
// Additional styles for potential empty chart elements
.chart-container.empty-chart, .chart-container .empty-message {
background-color: black !important;
color: white !important;
}
`
const styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
})

1 ACCEPTED SOLUTION

ascott011
8 - Cloud Apps
8 - Cloud Apps

Figured it out myself.

Added this to the script: .widget-no-result-overlay { background-color: black !important; color: white !important;

View solution in original post

2 REPLIES 2

ascott011
8 - Cloud Apps
8 - Cloud Apps

Figured it out myself.

Added this to the script: .widget-no-result-overlay { background-color: black !important; color: white !important;

ascott011
8 - Cloud Apps
8 - Cloud Apps

in the global styles section from the code posted in the question.