Splunk Search
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How to change the Y-axis label on a chart overlay?

michaelrosello
Path Finder
‎06-20-2018 08:06 PM

alt text

I have this chart the Y-axis on the right should display time. I added :00 using the JavaScript code below.

Problem is the label is being cut off and should not be implemented on the Y-axis on the left.

Is there a way to add the :00 to Y-axis on the right only and not be cut off from the screen.

require([
     "jquery",
     "splunkjs/mvc",
     "splunkjs/mvc/simplexml/ready!"
 ], function($,mvc){

     mvc.Components.get("myHighChart").getVisualization(function(chartView) {
         chartView.on("rendered", function() {
                 $("#myHighChart g.highcharts-data-label text:not(:contains(%)) tspan").after(" %");
                 $("#myHighChart g.highcharts-yaxis-labels text:not(:contains(%)) tspan").after(" %");
         });
     });
 });
Tags (3)
Preview file
1 KB
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎06-20-2018 09:14 PM

[Updated Answer] transform: translate should be used instead of transform: translateX

   <html depends="$alwaysHideCSSOverride$">
     <style>
       #myHighChart g.highcharts-yaxis-labels:last-child text{
         transform: translate(-10,0) !important;
       }
     </style>
   </html>

@michaelrosello, I think you have posted the code for Showing % in Data Label and Axis. https://wiki.splunk.com/User_talk:Niketnilay#Topic_7:_Show_Percent_in_Stacked_Column_Chart_instead_o...

However, as per your screenshot, you need :00 to be suffixed to only chart's overlaid y axis. Following is the JS you need for the same (I have taken out dat-label as you are not using that):

require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function ($, mvc) {

    mvc.Components.get("myHighChart").getVisualization(function (chartView) {
        chartView.on("rendered", function () {
            $("#myHighChart g.highcharts-yaxis-labels:last-child text:not(:contains(:00)) tspan").after(":00");
        });
    });
});

:last-child has been added to the CSS Selector as there will be two y-axis with same CSS Selector. Where last element is for overlaid Y-axis.

In order to shift the position of y-axis labels towards left you would need to use following CSS transform:

  <html depends="$alwaysHideCSSOverride$">
    <style>
      #myHighChart g.highcharts-yaxis-labels:last-child text{
        transform: translateX(-10px);
      }
    </style>
  </html>

Following is a run anywhere example for the same:

alt text

<dashboard script="highchart_axis_label_hour.js">
  <label>Chart Overlay Show Hour</label>
  <row>
    <panel>
      <html depends="$alwaysHideCSSOverride$">
        <style>
          #myHighChart g.highcharts-yaxis-labels:last-child text{
            transform: translateX(-10px);
          }
        </style>
      </html>
      <chart id="myHighChart">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count max(date_hour) as hour by log_level</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">1</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.overlayFields">"hour: ERROR","hour: WARN"</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">bottom</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>

Following is the required JS File (highchart_axis_label_hour.js) : 

require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function ($, mvc) {

    mvc.Components.get("myHighChart").getVisualization(function (chartView) {
        chartView.on("rendered", function () {
            $("#myHighChart g.highcharts-yaxis-labels:last-child text:not(:contains(:00)) tspan").after(":00");
        });
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Reply
Solved! Jump to solution
Solution

niketn
Legend
‎06-20-2018 09:14 PM

[Updated Answer] transform: translate should be used instead of transform: translateX

   <html depends="$alwaysHideCSSOverride$">
     <style>
       #myHighChart g.highcharts-yaxis-labels:last-child text{
         transform: translate(-10,0) !important;
       }
     </style>
   </html>

@michaelrosello, I think you have posted the code for Showing % in Data Label and Axis. https://wiki.splunk.com/User_talk:Niketnilay#Topic_7:_Show_Percent_in_Stacked_Column_Chart_instead_o...

However, as per your screenshot, you need :00 to be suffixed to only chart's overlaid y axis. Following is the JS you need for the same (I have taken out dat-label as you are not using that):

require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function ($, mvc) {

    mvc.Components.get("myHighChart").getVisualization(function (chartView) {
        chartView.on("rendered", function () {
            $("#myHighChart g.highcharts-yaxis-labels:last-child text:not(:contains(:00)) tspan").after(":00");
        });
    });
});

:last-child has been added to the CSS Selector as there will be two y-axis with same CSS Selector. Where last element is for overlaid Y-axis.

In order to shift the position of y-axis labels towards left you would need to use following CSS transform:

  <html depends="$alwaysHideCSSOverride$">
    <style>
      #myHighChart g.highcharts-yaxis-labels:last-child text{
        transform: translateX(-10px);
      }
    </style>
  </html>

Following is a run anywhere example for the same:

alt text

<dashboard script="highchart_axis_label_hour.js">
  <label>Chart Overlay Show Hour</label>
  <row>
    <panel>
      <html depends="$alwaysHideCSSOverride$">
        <style>
          #myHighChart g.highcharts-yaxis-labels:last-child text{
            transform: translateX(-10px);
          }
        </style>
      </html>
      <chart id="myHighChart">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count max(date_hour) as hour by log_level</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">1</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.overlayFields">"hour: ERROR","hour: WARN"</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">bottom</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>

Following is the required JS File (highchart_axis_label_hour.js) : 

require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function ($, mvc) {

    mvc.Components.get("myHighChart").getVisualization(function (chartView) {
        chartView.on("rendered", function () {
            $("#myHighChart g.highcharts-yaxis-labels:last-child text:not(:contains(:00)) tspan").after(":00");
        });
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Reply
Solved! Jump to solution

michaelrosello
Path Finder
‎06-20-2018 11:17 PM

It works now. But one problem though including in the original post.
When I hover at the chart the label comes back to its original place which is cut off.

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎06-20-2018 11:28 PM

Try with transform: translateX(-10px) !important;. If this does not work maybe it would need to be added through jQuery instead.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Reply
Solved! Jump to solution

michaelrosello
Path Finder
‎06-20-2018 11:33 PM

It still moves even with !important added.

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎06-21-2018 01:02 AM

Sorry my bad use translate instead of translateX... I have updated my answer please try out. Since chart svg by default is using translate... the settings overridden by translateX are getting removed.

<html depends="$alwaysHideCSSOverride$">
  <style>
    #myHighChart g.highcharts-yaxis-labels:last-child text{
      transform: translate(-10,0) !important;
    }
  </style>
</html>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Reply
Solved! Jump to solution

michaelrosello
Path Finder
‎06-21-2018 04:43 AM

It works now. Thanks

sadly requirements has been changed and I have to change things up a little. What I'm trying now is also replace the value of pop up modal from the chart when you hover a value. Maybe you have a insight to this also?

https://answers.splunk.com/answers/666254/change-modal-value-of-chart.html?minQuestionBodyLength=80

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎06-21-2018 05:00 AM

@michaelrosello do up vote the answer/comments that helped.

Thanks for posting a separate question for changing the Tooltip text. I will have a look at that.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...