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.
Ask a Question
Solved! Jump to solution

How to display values only for Chart overlay fields but not for other fields in bar chart

ujwalagangakoth
New Member
‎01-12-2018 08:18 AM

I have a bar chart with one chart overlay field.I want to display the values on chart overlay field not on bar chart.

Tags (1)
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎01-12-2018 09:40 AM

@ujwalagangakotha, you can first use Simple XML Chart configuration showDataLabels to set to all to set all data labels

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

This uses Highcharts to add svg with data labels for all series through series number. Overlay field/s appear first followed by remaining field/s in alphabetical order i.e. .highcharts-series-0, .highcharts-series-1, .highcharts-series-2... as per the total number series to be displayed.

You can then use Simple XML CSS override to hide the data labels using CSS selectors similar to the following:

      .highcharts-series-1 .highcharts-data-label text tspan 
      {
        visibility:hidden !important;
      }

Please find a run anywhere example below with one Chart Overlay Field Total i.e. CSS selector .highcharts-series-0 and remaining two fields ERROR and WARN with CSS Selectors .highcharts-series-1 and.highcharts-series-2` respectively.

PS: I have also use the Panel ID to apply CSS override to only one chart and compare results with another Panel with the same chart but without CSS override.

alt text

Following is the code for Run anywhere dashboard:

<form>
  <label>Show Data labels only on Overlay</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-60m@m</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHideCSSPanel$">
      <html>
        <style>
          #chartWithHiddenDataLabels .highcharts-series-1 .highcharts-data-label text tspan 
          {
            visibility:hidden !important;
          }
          #chartWithHiddenDataLabels .highcharts-series-2 .highcharts-data-label text tspan 
          {
            visibility:hidden !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Without CSS Override - Show All Series Data Labels</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd
| timechart span=15m count as Total count(eval(log_level=="ERROR")) as ERROR count(eval(log_level=="WARN")) as WARN</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</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">column</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.overlayFields">Total</option>
        <option name="charting.chart.showDataLabels">all</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="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel id="chartWithHiddenDataLabels">
      <title>With CSS Override - Hide All Series Data Label Except Overlay</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd
| timechart span=15m count as Total count(eval(log_level=="ERROR")) as ERROR count(eval(log_level=="WARN")) as WARN</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</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">column</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.overlayFields">Total</option>
        <option name="charting.chart.showDataLabels">all</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="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Preview file
41 KB
Reply
Solved! Jump to solution

BernardEAI
Communicator
‎11-03-2020 09:48 PM

I had the same requirement, however my series are being generated dynamically. The overlay is always the last of the series, however there can be between 5 and 10 series, depending on a dropdown selector (that sets a token). 

I found I could select the series I want to apply css styling to by using the token value in the css selector. 

In my case I first hide all the data labels, and then set the visibility for the last series (the overlay) to visible. 

.highcharts-data-label text tspan 
{
visibility:hidden !important;
}  

.highcharts-series-$p2_nr_clusters$ .highcharts-data-label text tspan 
{
visibility:visible !important;
}
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎01-12-2018 09:40 AM

@ujwalagangakotha, you can first use Simple XML Chart configuration showDataLabels to set to all to set all data labels

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

This uses Highcharts to add svg with data labels for all series through series number. Overlay field/s appear first followed by remaining field/s in alphabetical order i.e. .highcharts-series-0, .highcharts-series-1, .highcharts-series-2... as per the total number series to be displayed.

You can then use Simple XML CSS override to hide the data labels using CSS selectors similar to the following:

      .highcharts-series-1 .highcharts-data-label text tspan 
      {
        visibility:hidden !important;
      }

Please find a run anywhere example below with one Chart Overlay Field Total i.e. CSS selector .highcharts-series-0 and remaining two fields ERROR and WARN with CSS Selectors .highcharts-series-1 and.highcharts-series-2` respectively.

PS: I have also use the Panel ID to apply CSS override to only one chart and compare results with another Panel with the same chart but without CSS override.

alt text

Following is the code for Run anywhere dashboard:

<form>
  <label>Show Data labels only on Overlay</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-60m@m</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHideCSSPanel$">
      <html>
        <style>
          #chartWithHiddenDataLabels .highcharts-series-1 .highcharts-data-label text tspan 
          {
            visibility:hidden !important;
          }
          #chartWithHiddenDataLabels .highcharts-series-2 .highcharts-data-label text tspan 
          {
            visibility:hidden !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Without CSS Override - Show All Series Data Labels</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd
| timechart span=15m count as Total count(eval(log_level=="ERROR")) as ERROR count(eval(log_level=="WARN")) as WARN</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</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">column</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.overlayFields">Total</option>
        <option name="charting.chart.showDataLabels">all</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="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel id="chartWithHiddenDataLabels">
      <title>With CSS Override - Hide All Series Data Label Except Overlay</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd
| timechart span=15m count as Total count(eval(log_level=="ERROR")) as ERROR count(eval(log_level=="WARN")) as WARN</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</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">column</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.overlayFields">Total</option>
        <option name="charting.chart.showDataLabels">all</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="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Preview file
41 KB
Reply
Solved! Jump to solution

mayurr98
Super Champion
‎01-12-2018 08:42 AM

can you provide XML with what you have?

0 Karma
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Design, Compete, Win: Submit Your Best Splunk Dashboards for a .conf26 Pass

Hello Splunkers,  We’re excited to kick off a Splunk Dashboard contest! We know that dashboards are a primary ...

May 2026 Splunk Expert Sessions: Security & Observability

Level Up Your Operations: May 2026 Splunk Expert Sessions Whether you are refining your security posture or ...

Network to App: Observability Unlocked [May & June Series]

In today’s digital landscape, your environment is no longer confined to the data center. It spans complex ...