Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
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!

Observe and Secure All Apps with Splunk

  Join Us for Our Next Tech Talk: Observe and Secure All Apps with SplunkAs organizations continue to innovate ...

Splunk Decoded: Business Transactions vs Business IQ

It’s the morning of Black Friday, and your e-commerce site is handling 10x normal traffic. Orders are flowing, ...

Fastest way to demo Observability

I’ve been having a lot of fun learning about Kubernetes and Observability. I set myself an interesting ...