Hello
How can I hide or delete the DATE category on a visualization? I want to see only time on the graph.
Search:
index...source… sourcetype… | timechart sum(CNT) by DELIVER_STATUS
1 Solution
@belomv, you can do this by adding the following CSS Style Override to hide x-axis label text with tspan at 2nd and 3rd position which are used for "Week Day, Month, Date" and "Year" resepectively. For the following example Chart id is myTimeChart1 to apply the CSS to specific chart (you can generalize as per your use case). Also in order for such change you should ensure that Hours are returned only for one day i.e. Today, Yesterday etc.
<html>
<style>
#myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(2), #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(3){
visibility: hidden !important;
}
</style>
</html>
Following is a run anywhere dashboard example based on timechart built on Splunk's _internal index.
<dashboard>
<label>Hide Weekday Date and Year from Timechart</label>
<row>
<panel>
<html>
<style>
#myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(2), #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(3){
visibility: hidden !important;
}
</style>
</html>
<chart id="myTimeChart">
<search>
<query>index=_internal sourcetype=splunkd log_level!=INFO component!="Conf*"
| timechart count by component limit=5 useother=f usenull=f</query>
<earliest>@d</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">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">area</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">stacked</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">ellipsisEnd</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">right</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>
Please try out and confirm!
@belomv, you can do this by adding the following CSS Style Override to hide x-axis label text with tspan at 2nd and 3rd position which are used for "Week Day, Month, Date" and "Year" resepectively. For the following example Chart id is myTimeChart1 to apply the CSS to specific chart (you can generalize as per your use case). Also in order for such change you should ensure that Hours are returned only for one day i.e. Today, Yesterday etc.
<html>
<style>
#myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(2), #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(3){
visibility: hidden !important;
}
</style>
</html>
Following is a run anywhere dashboard example based on timechart built on Splunk's _internal index.
<dashboard>
<label>Hide Weekday Date and Year from Timechart</label>
<row>
<panel>
<html>
<style>
#myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(2), #myTimeChart svg g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) tspan:nth-child(3){
visibility: hidden !important;
}
</style>
</html>
<chart id="myTimeChart">
<search>
<query>index=_internal sourcetype=splunkd log_level!=INFO component!="Conf*"
| timechart count by component limit=5 useother=f usenull=f</query>
<earliest>@d</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">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">area</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">stacked</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">ellipsisEnd</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">right</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>
Please try out and confirm!
