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(" %");
});
});
});
[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");
});
});
});
[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");
});
});
});
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.
Try with transform: translateX(-10px) !important;
. If this does not work maybe it would need to be added through jQuery instead.
It still moves even with !important added.
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>
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
@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.