- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Per documentation: https://docs.splunk.com/Documentation/Splunk/9.1.2/Viz/ChartConfigurationReference
The property charting.chart.showDataLabels only allow the type (all | minmax | none).
I am attempting to hide data labels for a specific field, but enable data labels for other specified fields.
I am attempting to do something similar to charting.fieldColors which uses maps, but the types are obviously not accepted for the showDataLabels property:
<option name="charting.chart.showDataLabels">
{"field1":none, "field2":all}
</option>
Is there a workaround possible for this objective?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Making this the solution as I have provided step-by-step instructions, but all credit go to @PickleRick for the suggestion.
Based on your response, I found a relevant helpful post at https://community.splunk.com/t5/Dashboards-Visualizations/How-do-I-update-panel-color-in-Splunk-usin...
I had to use the Browser Inspector to identify the specific elements. I inspected the data label itself (not the line/bar whatever you're looking at) which in my case, revealed the class called 'highcharts-label highcharts-data-label highcharts-data-label-color-undefined'.
However, there was not a way to uniquely select these element by itself, so I had to refer to its parent element, which had a class of 'highcharts-data-labels highcharts-series-0 highcharts-line-series', where the numeral character 0 is the series identifier (0,1,2,3 and so on...) Perfect! The series number I wanted to hide is 0.
This also helped me to specify the specific element: https://www.w3schools.com/cssref/css_selectors.php
With CSS selector, the selector is then (keep in mind the spaces in class name are actually separators and there were 3 seperate classes in that element. I am only selecting the first 2 classes and chaining them:
.highcharts-data-labels.highcharts-series-0
The following block is inserted into panel and works like a charm, hiding only the specified data labels while preserving the other data labels, resulting in a cleaner look:
<row>
<panel>
<title>Blah Blah Blah</title>
<html depends="$alwaysHideCSSStyle$">
<style>
.highcharts-data-labels.highcharts-series-0 {
display:none;
}
</style>
</html>
<chart> ...
A caveat is that display:none treats this element as air. The chart might auto-adjust itself to fill this space and may impact your desired visual layout. An alternative is to use visibility:hidden, which allows the element to take space on the chart, but be hidden.
Thank you!
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The showDataLabels setting is all or none. It cannot be set for individual fields so it would set like this
<option name="charting.chart.showDataLabels">all</option>
If this reply helps you, Karma would be appreciated.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you. For Splunk, would you say it is currently impossible to be able to show/hide the individual fields?* No alternative workarounds?
(*To clarify, mimicking the behavior of the showDataLabels setting for the individual fields.)
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Yes, I would say it is not possible to do in Simple XML. @PickleRick may be on to something, however.
If this reply helps you, Karma would be appreciated.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You could try to walkaround that with custom css. Insert a <html><style>[...]</style></html> block into your panel and set display: none for selected elements.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Making this the solution as I have provided step-by-step instructions, but all credit go to @PickleRick for the suggestion.
Based on your response, I found a relevant helpful post at https://community.splunk.com/t5/Dashboards-Visualizations/How-do-I-update-panel-color-in-Splunk-usin...
I had to use the Browser Inspector to identify the specific elements. I inspected the data label itself (not the line/bar whatever you're looking at) which in my case, revealed the class called 'highcharts-label highcharts-data-label highcharts-data-label-color-undefined'.
However, there was not a way to uniquely select these element by itself, so I had to refer to its parent element, which had a class of 'highcharts-data-labels highcharts-series-0 highcharts-line-series', where the numeral character 0 is the series identifier (0,1,2,3 and so on...) Perfect! The series number I wanted to hide is 0.
This also helped me to specify the specific element: https://www.w3schools.com/cssref/css_selectors.php
With CSS selector, the selector is then (keep in mind the spaces in class name are actually separators and there were 3 seperate classes in that element. I am only selecting the first 2 classes and chaining them:
.highcharts-data-labels.highcharts-series-0
The following block is inserted into panel and works like a charm, hiding only the specified data labels while preserving the other data labels, resulting in a cleaner look:
<row>
<panel>
<title>Blah Blah Blah</title>
<html depends="$alwaysHideCSSStyle$">
<style>
.highcharts-data-labels.highcharts-series-0 {
display:none;
}
</style>
</html>
<chart> ...
A caveat is that display:none treats this element as air. The chart might auto-adjust itself to fill this space and may impact your desired visual layout. An alternative is to use visibility:hidden, which allows the element to take space on the chart, but be hidden.
Thank you!
