Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Is it possible to increase the size of pie chart image?

nagar57
Communicator
‎05-01-2020 01:57 AM

I am having 4 pie charts in a row and because of which people who are using small screen laptops finding it difficult to read the pie chart information. As there is blank white space in the pie chart panel which I think can be utilized to increase the size of pie chart image.
I am using simple XML and want to implement this change in it.
Anyone have any idea how to do it?

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

tauliang
Communicator
‎05-01-2020 12:06 PM

First, you can tweak the height of the chart by adding an option such as

<option name="height">600</option>

Second, you can use CSS Override to remove the margins so the white spaces are removed.

Third, if you can live without the labels, remove them so more spaces are used for showing the pies. 

<option name="charting.chart.showLabels">false</option>

An example is show below using the _internal index

<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.chart">pie</option>
        <option name="charting.drilldown">all</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</option>
      </chart>
    </panel>
  </row>
</dashboard>

This is how it looks like after these tweaks. Hope this helps.
This is how it looks like

View solution in original post

Preview file
347 KB
Reply
Solved! Jump to solution
Solution

tauliang
Communicator
‎05-01-2020 12:06 PM

First, you can tweak the height of the chart by adding an option such as

<option name="height">600</option>

Second, you can use CSS Override to remove the margins so the white spaces are removed.

Third, if you can live without the labels, remove them so more spaces are used for showing the pies. 

<option name="charting.chart.showLabels">false</option>

An example is show below using the _internal index

<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.chart">pie</option>
        <option name="charting.drilldown">all</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</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.chart">pie</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.legend.placement">none</option>
        <option name="height">400</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.chart.showLabels">false</option>
      </chart>
    </panel>
  </row>
</dashboard>

This is how it looks like after these tweaks. Hope this helps.
This is how it looks like

Preview file
347 KB
Reply
Solved! Jump to solution

gerdo888
Engager
‎05-01-2020 12:11 PM

Cool, didn’t know we can do this.

0 Karma
Reply
Get Updates on the Splunk Community!

Your Guide to Splunk Digital Experience Monitoring

A flawless digital experience isn't just an advantage, it's key to customer loyalty and business success. But ...

Data Management Digest – November 2025

  Welcome to the inaugural edition of Data Management Digest! As your trusted partner in data innovation, the ...

Upcoming Webinar: Unmasking Insider Threats with Slunk Enterprise Security’s UEBA

Join us on Wed, Dec 10. at 10AM PST / 1PM EST for a live webinar and demo with Splunk experts! Discover how ...