How do you apply CSS definitions to a row of charts in a single panel?

valadasr — Fri, 25 Jan 2019 13:39:44 GMT

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?

Re: How do you apply CSS definitions to a row of charts in a single panel?

niketn — Fri, 25 Jan 2019 16:37:36 GMT

@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%.

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>

Re: How do you apply CSS definitions to a row of charts in a single panel?

valadasr — Mon, 28 Jan 2019 10:48:40 GMT

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

Re: How do you apply CSS definitions to a row of charts in a single panel?

emottola — Sat, 23 Nov 2019 06:37:46 GMT

Awesome examples, thanks!

topic Re: How do you apply CSS definitions to a row of charts in a single panel? in Dashboards & Visualizations

How do you apply CSS definitions to a row of charts in a single panel?

Re: How do you apply CSS definitions to a row of charts in a single panel?

Re: How do you apply CSS definitions to a row of charts in a single panel?

Re: How do you apply CSS definitions to a row of charts in a single panel?