Dashboards & Visualizations

how to add a legend in pie chart

abhishekdubey00
Engager

below i need to add a legend in pie chart so please tell me what would be the code

pie

none

all

ellipsisNone

true

false

0 Karma

niketn
Legend

@abhishekdubey006 try the following run anywhere example with two options:

Option 1) If the Pie Chart Legend has fixed legends, you can use html panel.
Option 2) If the Pie Chart Legends are dynamic you can use a table with sequential color similar to pie chart.

alt text

Please try the run anywhere dashboard example. You can further work on CSS to change the look and feel of legends as per your needs (like shifting legend table position and hiding table header called Legends in my example).

<dashboard>
  <label>Pie Chart Label</label>
  <search base="errors1">
    <query>| transpose
| search column="log_level"
    </query>
    <progress>
      <set token="legend1">$result.row 1$</set>
      <set token="legend2">$result.row 2$</set>
    </progress>
  </search>
  <row>
    <panel>
      <title>Option 1: Static fields using html panel as legend</title>
      <chart>
        <search id="errors1">
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| stats count by log_level
| append[| makeresults
| fields - _time
| eval dummyData="ERROR,0;WARN,0"
| makemv dummyData delim=";"
| mvexpand dummyData
| makemv dummyData delim=","
| eval log_level=mvindex(dummyData,0), count=mvindex(dummyData,1)
| fields - dummyData]
| dedup log_level
| eventstats sum(count) as Total
| eval perc=round((count/Total)*100,2)
| eval log_level=log_level." (".perc."%)"
| fields - Total perc</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">pie</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.seriesColors">[0x1e93c6, 0xf2b827]</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
      <html>
        <div style="float: right;">
          <div style="background:#1e93c6">$legend1$</div>
          <div style="background:#f2b827">$legend2$</div>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel id="panel_pie_2">
      <title>Option 2: Dynamic Fields with table as Legends</title>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #panel_pie_2{
            width: 70% !important;
          }
          #panel_legend_2{
            width: 30% !important;
          }
        </style>
      </html>
      <chart>
        <search id="errors2">
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| stats count by log_level
| eventstats sum(count) as Total
| eval perc=round((count/Total)*100,2)
| eval log_level=log_level." (".perc."%)"
| fields - Total perc</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">pie</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
    <panel id="panel_legend_2">
      <table>
        <search base="errors1">
          <query>|fields log_level
          | rename log_level as "Legends"
          </query>
        </search>
        <format type="color" field="Legends">
          <colorPalette type="sharedList"></colorPalette>
          <scale type="sharedCategory"></scale>
        </format>
      </table>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

kavyadekkata
Explorer

hi @niketnilay,

I tried Option-1 mentioned in your reply. But i have ten legends, but only 5 of them are populated 😐 could you please help

Warm Regards
Kavya

 
 

 

0 Karma

niketn
Legend

@kavyadekkata that is because transpose default limit is 5. You need to explicitly mention 10 or may be 0, in the run anywhere example.

| transpose 10

However, do check out Splunk Dashboard App Beta which supports Legends (and even Donut) out of the box. https://splunkbase.splunk.com/app/4710/

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

adonio
Ultra Champion

@abhishekdubey006
there arent any legend options on the pie as there are on the bar chart, and imho you are tied to the legend with a line to the color piece of the piechart
When you click the format button, no Legend tab is available
i guess you can css it somehow, but i will recommend against.
there are also other visualizations that you might find helpful, like the doughnut viz
look it up in splunkbase

hope it helps

0 Karma

abhishekdubey00
Engager

pie

none

all

ellipsisNone

true

false

0 Karma

abhishekdubey00
Engager

i need legend code as per color on the right side of the bottom like in showing in the chart

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@abhishekdubey006

Can you please use CTRL + K when sharing code?

0 Karma

abhishekdubey00
Engager
 <option name="charting.chart">pie</option>

<option name="charting.drilldown">none</option>

<option name="charting.chart.showDataLabels">all</option>

<option name="charting.legend.labelStyle.overflowMode">ellipsisNone</option>

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

<option name="charting.chart.showPercent">false</option>
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@abhishekdubey006

Can you please share more information regarding your SEARCH and what is your expected pie chart?

Meanwhile, you can also check below Answer.
https://answers.splunk.com/answers/236976/legend-in-pie-chart-dashboard.html

0 Karma
Get Updates on the Splunk Community!

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...