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)
})
