How can I have 3 charts for 1 panel display on the same row instead of each on a different row?

[bcronrath]

My goal here is to save my panel as a "pre-built" one that can be distributed to other users dashboard at my company. What I'm running into is a lack of formatting options that I figure have to exist somewhere, but I am simply missing how to implement them.

Essentially if I create 3 different panels and put them within the same <row> element, it visually accomplish what I want to see, however the fact that each of them are different panels kills the functionality that I want of the user only have to add 1 panel instead of 3 different ones.

I see that I can add 3 charts to 1 panel, however, I cannot get them to all display on 1 row. Here is the current setup:

<row>
<chart>
  ....
</chart>
<chart>
 .....
 </chart>
<chart>
  .....
 </chart>
</row>

Does anyone know of a way to get all these 3 charts to display on the same row without creating more than 1 panel?

[rjthibod]

You need to wrap each <chart> with <panel>. You can have a <title> directly under the <panel> element or the <chart> element. I would not suggest putting a<title> under both.

 <row>
   <panel>
     <chart>
        ....
     </chart>
   </panel>
   <panel>
      <chart>
       .....
      </chart>
    </panel>
    <panel>
      <chart>
       .....
      </chart>
    </panel>
 </row>

[bcronrath]

I downvoted this post because did not read the question, i was asking for a single panel, not 3, of course i've tried the 3 panel approach as outlined

[rjthibod]

Sorry for the confusion, but I was a little unclear if you did try that given that you did not have an actual <panel> element (or <title> elements) in your XML snippet, even though you referred to it as a panel.

[davebrooking]

If your panels need to be of different widths you can try this answer

Dave

[lquinn · Accepted solution]

You can add a css stylesheet to your XML by including it in your dashboard tag:

<dashboard stylesheet="mycss.css">

Then include a stanza like the following in mycss.css (file saved to $SPLUNK_HOME/etc/apps/{your_app}/appserver/static):

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

Note that this will cause all charts in your dashboard to be 1/3 width and inline. If you have other charts in you dashboard that you do not want formatted in this way, you will have to make the CSS more specific.