All Apps and Add-ons

Can we turn on the Data Values in order to see the exact number of in chart visualizations?

vreddy28
Engager

In the chart visualization we can turn on the Data Values in order to see the exact number however when plotting 1 month worth of data these numbers can get tight when displaying a 4 or 5 digit data set. I’m looking for a way to rotate the data set (like I have it on the X-axis) to that I may not have to worry about it so much. At this point I’m not sure if I want it at a 45, 90 or some other degree angle but I want to have the option to change that. My guess is that it is somewhere using the CSS selector with rotate option I don’t know what to edit/modify to get the chart to perform this change.

0 Karma
1 Solution

niketn
Legend

@vreddy28, you can use CSS Style override for Data Label text rotation using following CSS Selector where chart id is #chartWithRotatedDataLabel.

#chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
     transform: translateY(20px)rotate(-90deg)
}

Following is a run anywhere dashboard to flip Data Label Orientation between Horizontal and Vertical.

alt text
Following is the Simple XML Dashboard code:

<form>
  <label>Chart Data Label Rotate</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
              transform: $tokDataLabelRotation$ !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="radio" token="tokDataLabelRotation" searchWhenChanged="true">
        <label>Data Label Rotation</label>
        <choice value="horizontal">Horizontal</choice>
        <choice value="vertical">Vertical</choice>
        <default>horizontal</default>
        <change>
          <condition value="vertical">
            <set token="tokDataLabelRotation">translateY(20px)rotate(-90deg)</set>
          </condition>
          <condition>
            <set token="tokDataLabelRotation">initial</set>
          </condition>
        </change>
      </input>
      <chart id="chartWithRotatedDataLabel">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  timechart span=1h count</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">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.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>

Please try out and confirm!

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

View solution in original post

niketn
Legend

@vreddy28, you can use CSS Style override for Data Label text rotation using following CSS Selector where chart id is #chartWithRotatedDataLabel.

#chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
     transform: translateY(20px)rotate(-90deg)
}

Following is a run anywhere dashboard to flip Data Label Orientation between Horizontal and Vertical.

alt text
Following is the Simple XML Dashboard code:

<form>
  <label>Chart Data Label Rotate</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
              transform: $tokDataLabelRotation$ !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="radio" token="tokDataLabelRotation" searchWhenChanged="true">
        <label>Data Label Rotation</label>
        <choice value="horizontal">Horizontal</choice>
        <choice value="vertical">Vertical</choice>
        <default>horizontal</default>
        <change>
          <condition value="vertical">
            <set token="tokDataLabelRotation">translateY(20px)rotate(-90deg)</set>
          </condition>
          <condition>
            <set token="tokDataLabelRotation">initial</set>
          </condition>
        </change>
      </input>
      <chart id="chartWithRotatedDataLabel">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  timechart span=1h count</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">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.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>

Please try out and confirm!

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

niketn
Legend

@vreddy28 do accept the answer to mark this question as answered and help out others facing similar challenge.

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

james_n
Path Finder

@niketnilay this is working fine in Chrome but not working in explorer. could you please help me on this.

0 Karma

niketn
Legend

@james_n I could not get this to work on Internet Explorer. This is more of a CSS question rather than Splunk capability for IE. I event tried the following CSS for all browser and it worked on Chrome, Edge, Firefox but not on IE 😞

       #chartWithRotatedDataLabel svg g.highcharts-data-labels g text{
           transform: $tokDataLabelRotation$ !important;
          -ms-transform: $tokDataLabelRotation$ !important;
          -webkit-transform: $tokDataLabelRotation$ !important;
          -moz-transform: $tokDataLabelRotation$ !important;
          -o-transform: $tokDataLabelRotation$ !important;
       }
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...

Splunkbase | Splunk Dashboard Examples App for SimpleXML End of Life

The Splunk Dashboard Examples App for SimpleXML will reach end of support on Dec 19, 2024, after which no new ...

Understanding Generative AI Techniques and Their Application in Cybersecurity

Watch On-Demand Artificial intelligence is the talk of the town nowadays, with industries of all kinds ...