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!

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Wednesday, May 29, 2024  |  11AM PST / 2PM ESTRegister now and join us to learn more about how you can ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer Certification at ...

We’re excited to announce a new Splunk certification exam being released at .conf24! If you’re headed to Vegas ...