Dashboards & Visualizations

How to wrap text in axis of a bar chart?

josephinemho
Path Finder

I've already tried the following but they're not giving me what I want, which is the full text displayed in the axis:

charting.legend.labelStyle.overflowMode set to ellipsisNone
charting.axisLabelsX.majorLabelStyle.rotation" set to 90

alt text

ALSO, question #2: How do you wrap text in general? For example, in a single value chart (where I am displaying a text value and I want it to wrap instead of being on one line)

alt text

Tags (2)
0 Karma

josephinemho
Path Finder

Thank you @niketnilay and @mayurr98!

Unfortunately, I'm still on Splunk 6.5.3 and Trellis is not available to me 😞 but I did try rotating and adjusting the height and it works, but since the text doesn't wrap it's still very long and not practical to display it in that way.

alt text

0 Karma

niketn
Legend

@josephinemho, for the Column Chart you would need to rotate by 90 degrees

<option name="charting.axisLabelsX.majorLabelStyle.rotation">-90</option>

And increase the Chart Height as suggested by @mayurr98, (I have used 700 px as example, you can change as per your need)

<option name="height">700</option>

You dont need trellis, since I am on Splunk 7.0 it adds trellis default options which you can delete. In my code example I have answered your second question where you wanted to truncate the Single Value Result Label. It is a run anywhere search based on Splunk's _internal index so you can test the same independently.

Here is the complete Dashboard code:

<dashboard>
  <label>Label Truncation</label>
  <row>
    <panel>
      <title>Single Value label truncation</title>
      <single id="mySingleValue">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO NOT(Cannot read*)
| top 10 message
| head 1
| eval truncateLimit=25
| eval front=if(len(message)>truncateLimit,substr(message,1,round(truncateLimit/2)),message)
| eval rear=if(len(message)>truncateLimit,substr(message,-round(truncateLimit/2)),message)
| eval message=front."...".rear
| table message</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <title>Column Chart x-axis label truncation</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO NOT(Cannot read*)
| top 10 message</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">-90</option>
        <option name="height">700</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">none</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>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@josephinemho, please try out and confirm!

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

mayurr98
Super Champion

use bar chart and try this

 <option name="height">enter a number px</option> 

niketn
Legend

@josephinemho, if you have already rotated the x-axis labels by 90 degrees, you just need to increase the height of the Column chart to accommodate the label. You can try dragging to resize the chart once it is displayed to see what height might actually be required.

@josephinemho, the Single Value Result truncation can be handled directly in SPL or else in JavaScript on similar lines. Following is an example.

  <row>
    <panel>
      <title>Single Value label truncation</title>
      <single id="mySingleValue">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO NOT(Cannot read*)
| top 10 message
| head 1
| eval truncateLimit=25
| eval front=if(len(message)>truncateLimit,substr(message,1,round(truncateLimit/2)),message)
| eval rear=if(len(message)>truncateLimit,substr(message,-round(truncateLimit/2)),message)
| eval message=front."...".rear
| table message</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </single>
    </panel>
  </row>

If you want to apply CSS Styles like font-size/color etc, you can apply CSS Extension to Simple XML. You should be able to find several examples on Splunk Answers like https://answers.splunk.com/answers/590581/refresh-data-in-table-by-collecting-token-on-click.html

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

josephinemho
Path Finder

Thank you @niketnilay and @mayurr98!

Unfortunately, I'm still on Splunk 6.5.3 and Trellis is not available to me 😞 but I did try rotating and adjusting the height and it works, but since the text doesn't wrap it's still very long and not practical to display it in that way.

0 Karma
Get Updates on the Splunk Community!

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...