Solved: Re: How to change the Y-axis label on a chart ove...

michaelrosello · ‎06-20-2018

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(" %");
         });
     });
 });

niketn · ‎06-20-2018

[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:

<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

niketn · ‎06-20-2018

[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:

<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!!!"

michaelrosello · ‎06-20-2018

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.

niketn · ‎06-20-2018

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!!!"

michaelrosello · ‎06-20-2018

It still moves even with !important added.

niketn · ‎06-21-2018

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!!!"

michaelrosello · ‎06-21-2018

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

niketn · ‎06-21-2018

@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!!!"

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

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor