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