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 do you apply CSS definitions to a row of charts in a single panel?

valadasr
Explorer
‎01-25-2019 05:39 AM

Hello guys,

I hope you can guide me with this since I've been going around this for some time and I am not seeing a solution in sight.

I have a panel with 3 charts in it, and I wanted to put them in a row. I've tried using CSS for .panel-element-row, but unfortunately, it affects all the charts in the dashboard, which is not the desired goal.

.panel-element-row{
          display: inline-block !important; 
          width: 33% !important; 
}

I've applied a class to see if it worked, but to no avail:

#panel1 .panel-element-row{
          display: inline-block !important; 
          width: 33% !important;  
      }

Can you guys guide me the right way?

Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎01-25-2019 08:37 AM

@valadasr there are multiple options you can try

1) Trellis Layout , which does this out of the box if you are on Splunk 6.6 or Higher
2) Multiple Panels with their individual chart, then use CSS Override to remove right margin to bring all charts together.
3) Single panel with multiple charts and then use CSS Override to bring them in same row and adjust width to make total panel width as 100%.

alt text

Following is the run anywhere example based on Splunk's _internal index which has example of all thee options above:

<dashboard>
  <label>Charts in Single Row</label>
  <row>
    <panel>
      <html>
        <h3 style="text-align:center;">Option 1: Trellis Layout (6.6 and above Out of the box no CSS)</h3>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level IN ("INFO","WARN","ERROR") 
| stats count by component log_level</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">346</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">0</option>
        <option name="trellis.splitBy">log_level</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <h3 style="text-align:center;">Option 2: Multiple panels with respective Chart (CSS override to merge panel margins)</h3>
        <style>          
          #multiplePanelsWithIndividualCharts .dashboard-panel{
            margin-right: 0px !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row id="multiplePanelsWithIndividualCharts">
    <panel>
      <chart>
        <title>INFO</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=INFO 
| chart count as INFO by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">202</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel>
      <chart>
        <title>ERROR</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=ERROR
| chart count as ERROR by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">207</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel>
      <chart>
        <title>WARN</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=WARN
| chart count as WARN by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">200</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <h3 style="text-align:center;">Option 3: Single Panel with multiple Charts (CSS override to pull all charts in Single row and adjust width or charts)</h3>
        <style>
          #panelWithMultipleCharts .dashboard-panel{
            display: flex !important;
          }
          #panelWithMultipleCharts .panel-element-row{
            width:33.33% !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row id="panelWithMultipleCharts">
    <panel>
      <chart>
        <title>INFO</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=INFO 
| chart count as INFO by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">212</option>
        <option name="refresh.display">progressbar</option>
      </chart>
      <chart>
        <title>ERROR</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=ERROR
| chart count as ERROR by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">210</option>
        <option name="refresh.display">progressbar</option>
      </chart>
      <chart>
        <title>WARN</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=WARN
| chart count as WARN by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">202</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Preview file
1 KB
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎01-25-2019 08:37 AM

@valadasr there are multiple options you can try

1) Trellis Layout , which does this out of the box if you are on Splunk 6.6 or Higher
2) Multiple Panels with their individual chart, then use CSS Override to remove right margin to bring all charts together.
3) Single panel with multiple charts and then use CSS Override to bring them in same row and adjust width to make total panel width as 100%.

alt text

Following is the run anywhere example based on Splunk's _internal index which has example of all thee options above:

<dashboard>
  <label>Charts in Single Row</label>
  <row>
    <panel>
      <html>
        <h3 style="text-align:center;">Option 1: Trellis Layout (6.6 and above Out of the box no CSS)</h3>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level IN ("INFO","WARN","ERROR") 
| stats count by component log_level</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">346</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">0</option>
        <option name="trellis.splitBy">log_level</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <h3 style="text-align:center;">Option 2: Multiple panels with respective Chart (CSS override to merge panel margins)</h3>
        <style>          
          #multiplePanelsWithIndividualCharts .dashboard-panel{
            margin-right: 0px !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row id="multiplePanelsWithIndividualCharts">
    <panel>
      <chart>
        <title>INFO</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=INFO 
| chart count as INFO by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">202</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel>
      <chart>
        <title>ERROR</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=ERROR
| chart count as ERROR by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">207</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel>
      <chart>
        <title>WARN</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=WARN
| chart count as WARN by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">200</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <h3 style="text-align:center;">Option 3: Single Panel with multiple Charts (CSS override to pull all charts in Single row and adjust width or charts)</h3>
        <style>
          #panelWithMultipleCharts .dashboard-panel{
            display: flex !important;
          }
          #panelWithMultipleCharts .panel-element-row{
            width:33.33% !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row id="panelWithMultipleCharts">
    <panel>
      <chart>
        <title>INFO</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=INFO 
| chart count as INFO by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">212</option>
        <option name="refresh.display">progressbar</option>
      </chart>
      <chart>
        <title>ERROR</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=ERROR
| chart count as ERROR by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">210</option>
        <option name="refresh.display">progressbar</option>
      </chart>
      <chart>
        <title>WARN</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=WARN
| chart count as WARN by component</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">none</option>
        <option name="height">202</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Preview file
1 KB
Reply
Solved! Jump to solution

valadasr
Explorer
‎01-28-2019 02:48 AM

Thanks a lot for your input! it worked like a charm

Reply
Solved! Jump to solution

emottola
Explorer
‎11-22-2019 10:37 PM

Awesome examples, thanks!

0 Karma
Reply
Get Updates on the Splunk Community!

Threat Hunting Unlocked: How to Uplevel Your Threat Hunting With the PEAK Framework ...

WATCH NOWAs AI starts tackling low level alerts, it's more critical than ever to uplevel your threat hunting ...

Splunk APM: New Product Features + Community Office Hours Recap!

Howdy Splunk Community! Over the past few months, we’ve had a lot going on in the world of Splunk Application ...

Index This | Forward, I’m heavy; backward, I’m not. What am I?

April 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...