Dashboards & Visualizations

Display only overlay values in a bar chart Splunk 9.3.x

Federico92
Path Finder

Hi everyone.

I need to modify this bar chart 

Federico92_0-1738596637295.png
In order to hide the overlay lay and display the overlay values. Also need to remove "Total" value from the legend.

This is my CSS configurations that doesn't works:

<row>
<panel depends="$css$">
<title>CSS</title>
<html>
<style/>
<!-- hide numbers on the chart -->
#hide_number_distribution .highcharts-data-label text tspan
{
visibility:hidden;
}

<!-- show numbers for "Total" -->
#hide_number_distribution .highcharts-series-0 .highcharts-data-label text tspan
{
visibility:visible !important;
}

<!-- hide line for "Total" -->
#hide_number_distribution .highcharts-series-0.highcharts-line-series path
{
visibility:hidden !important;
}

<!-- hide "Total" from the legend -->
#hide_number_distribution .highcharts-legend-item .highcharts-line-series .highcharts-color-undefined .highcharts-series-0
{
visibility:hidden !important;
}

</style>
</html>
</panel>
</row>


The id "hide_number_distribution" is on the panel (not on the chart) and the dataLabels option for the chart is:
<option name="charting.chart.showDataLabels">none</option>

Can anyone help me to understand why this not works and fix it?

Thanks in advance

 

Labels (1)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

Try something like this

      <html>
        <style>
           #hide_number_distribution .highcharts-data-label text {
            display: none !important;
          }
           #hide_number_distribution .highcharts-series-0 .highcharts-data-label text {
            display: block !important;
          }
           #hide_number_distribution .highcharts-series-0 path,
           #hide_number_distribution .highcharts-legend .highcharts-series-0 text {
            display: none !important;
          }
        </style>
      </html>

View solution in original post

Federico92
Path Finder

Yeah it works sorry i need to active the showDataLabels in the charting options.

Thanks a lot

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Try something like this

      <html>
        <style>
           #hide_number_distribution .highcharts-data-label text {
            display: none !important;
          }
           #hide_number_distribution .highcharts-series-0 .highcharts-data-label text {
            display: block !important;
          }
           #hide_number_distribution .highcharts-series-0 path,
           #hide_number_distribution .highcharts-legend .highcharts-series-0 text {
            display: none !important;
          }
        </style>
      </html>

Federico92
Path Finder

Now the overlay line and the "Total" value in the legend are hidden. 

Overlay values to display are not visible yet

Federico92_0-1738656506377.png

 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

And here it is working

ITWhisperer_0-1738658342529.png

Please share your search and dashboard source (preferably in a code block </>) to see if there is something else going on

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

.conf25 Global Broadcast: Don’t Miss a Moment

Hello Splunkers, .conf25 is only a click away.  Not able to make it to .conf25 in person? No worries, you can ...

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 ...

What's New in Splunk Observability - August 2025

What's New We are excited to announce the latest enhancements to Splunk Observability Cloud as well as what is ...