Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How to set different background colors to different panels in one dashboard ?

Jouman
Path Finder
‎04-20-2023 02:40 PM

Hi all,

I design a dashboard with 3 panels and I hope to set different color to the background or headline of each panel to be able to read clearly.

Is there any way to assign each Panel into different color in XML?

Thanks

Labels (2)
Labels
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

yeahnah
Motivator
‎04-20-2023 10:38 PM

Hi @Jouman 

You can change panel colors using css.  Here's a run anywhere example dashboard (classic) that adjusts panel, header colors and panel widths.   

<form theme="light">
  <label>Example - Adjust Width and Colour of Panels in Dashboard</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label>Select Time</label>
      <default>
        <earliest>-15m</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <div>            
          <style>
            /* define some default colors */
            .dashboard-row .dashboard-panel{
              background-color:lightcyan !important;
            }
            .dashboard-panel h2{
              background:cyan !important;
              color:grey !important;
              text-align: center !important;
              font-weight: bold !important;
              border-top-right-radius: 12px;
              border-top-left-radius: 12px;
            }
            .dashboard-panel h3{
              background-color:lightgreen !important;
              font-weight: bold !important;
              text-align: center !important;
            }
            /* override default colors by panel id */
            #htmlPanel1{
              width:25% !important;
            }
            #htmlPanel1 h2{
              color:blue !important;
              background-color:crimson !important;
            }
            #htmlPanel1 .dashboard-panel{
              background-color:lightblue !important;
            }
            #errorStatsPanel{
              width:30% !important;
            }
            #errorStatsPanel h2{
              color:white !important;
              background-color:#cd5c5c !important;
            }
            #errorLineChartPanel{
              width:45% !important;
            }
            #errorLineChartPanel h2{
              background-color:green !important;
            }
            #errorLineChartPanel h3{
             background-color:darkgreen !important;
            }
         </style>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel id="htmlPanel1">
      <title>H2 Heading</title>
        <html>
          ADD HTML HERE
        </html>
    </panel>
    <panel id="errorStatsPanel">
      <title>Top 5 Error (Stats)</title>
      <table>
        <title>H3 Heading</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
 | top 5 component showperc=false</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1000</sampleRatio>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel id="errorLineChartPanel">
      <title>Splunkd Errors (Timechart)</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
 | timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>100</sampleRatio>
        </search>
        <option name="charting.chart">line</option>
        <option name="charting.drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="charting.backgroundColor">indianred</option>thistle</chart>
    </panel>
  </row>
</form>

Hopefully it gives you enough hints to meet you needs

View solution in original post

0 Karma
Reply
Solved! Jump to solution
Solution

yeahnah
Motivator
‎04-20-2023 10:38 PM

Hi @Jouman 

You can change panel colors using css.  Here's a run anywhere example dashboard (classic) that adjusts panel, header colors and panel widths.   

<form theme="light">
  <label>Example - Adjust Width and Colour of Panels in Dashboard</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label>Select Time</label>
      <default>
        <earliest>-15m</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <div>            
          <style>
            /* define some default colors */
            .dashboard-row .dashboard-panel{
              background-color:lightcyan !important;
            }
            .dashboard-panel h2{
              background:cyan !important;
              color:grey !important;
              text-align: center !important;
              font-weight: bold !important;
              border-top-right-radius: 12px;
              border-top-left-radius: 12px;
            }
            .dashboard-panel h3{
              background-color:lightgreen !important;
              font-weight: bold !important;
              text-align: center !important;
            }
            /* override default colors by panel id */
            #htmlPanel1{
              width:25% !important;
            }
            #htmlPanel1 h2{
              color:blue !important;
              background-color:crimson !important;
            }
            #htmlPanel1 .dashboard-panel{
              background-color:lightblue !important;
            }
            #errorStatsPanel{
              width:30% !important;
            }
            #errorStatsPanel h2{
              color:white !important;
              background-color:#cd5c5c !important;
            }
            #errorLineChartPanel{
              width:45% !important;
            }
            #errorLineChartPanel h2{
              background-color:green !important;
            }
            #errorLineChartPanel h3{
             background-color:darkgreen !important;
            }
         </style>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel id="htmlPanel1">
      <title>H2 Heading</title>
        <html>
          ADD HTML HERE
        </html>
    </panel>
    <panel id="errorStatsPanel">
      <title>Top 5 Error (Stats)</title>
      <table>
        <title>H3 Heading</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
 | top 5 component showperc=false</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1000</sampleRatio>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel id="errorLineChartPanel">
      <title>Splunkd Errors (Timechart)</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
 | timechart count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>100</sampleRatio>
        </search>
        <option name="charting.chart">line</option>
        <option name="charting.drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="charting.backgroundColor">indianred</option>thistle</chart>
    </panel>
  </row>
</form>

Hopefully it gives you enough hints to meet you needs

0 Karma
Reply
Solved! Jump to solution

Jouman
Path Finder
‎04-22-2023 01:00 PM

@yeahnah  Thank you so much! This resolve my problem. 

However, if I want to make two panels into the same color format and use same panel id in both panels. html. html will report fail, is there anything to make 2 panels into the same background color and font color? 

<panel id="htmlPanel1">

 
Thank you so much.

0 Karma
Reply
Solved! Jump to solution

yeahnah
Motivator
‎04-25-2023 06:07 PM

Hi @Jouman 

Panel IDs must be unique, but you can chain the css so the output looks the same.  For example...

            #errorStatsPanel h3, #errorLineChartPanel h3{
             background-color:darkgreen !important;
            }

Another possibility is to have your default setting cover the 2 panels and then just define overrides for 1 panel.

Hope that helps and Karma would be appreciated if this has been useful

Reply
Solved! Jump to solution

Jouman
Path Finder
‎04-27-2023 05:20 AM

@yeahnah  Really thanks for your help. This works for me perfectly.

0 Karma
Reply
Get Updates on the Splunk Community!

Join Us for Splunk University and Get Your Bootcamp Game On!

If you know, you know! Splunk University is the vibe this summer so register today for bootcamps galore ...

.conf24 | Learning Tracks for Security, Observability, Platform, and Developers!

.conf24 is taking place at The Venetian in Las Vegas from June 11 - 14. Continue reading to learn about the ...

Announcing Scheduled Export GA for Dashboard Studio

We're excited to announce the general availability of Scheduled Export for Dashboard Studio. Starting in ...