I have this sample dashboard:
<dashboard>
<label>Legend with fixed width</label>
<row>
<panel>
<chart>
<search>
<query>index=_internal name=batchreadertpool OR name=app_downloads | timechart count by name</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<option name="charting.chart">column</option>
<option name="charting.legend.maximumWidth">10</option>
<option name="charting.legend.minimumWidth">10</option>
</chart>
</panel>
</row>
<row>
<panel>
<chart>
<search>
<query>index=_internal name=aq OR name=aeq | timechart count by name</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<option name="charting.chart">column</option>
<option name="charting.legend.maximumWidth">10</option>
<option name="charting.legend.minimumWidth">10</option>
<option name="charting.visibility">hidden</option>
</chart>
</panel>
</row>
<row>
<panel>
<chart>
<search>
<query>index=_internal name=aq OR name=aeq | timechart count by name | eval aeq=aeq*1000 | eval aq=aq*1000</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<option name="charting.chart">column</option>
<option name="charting.legend.labelStyle.maximumWidth">10</option>
<option name="charting.legend.labelStyle.minimumWidth">10</option>
</chart>
</panel>
</row>
</dashboard>
It has three searches, all across the same time range. The first one however has columns with longer names than the other two, so the legend is wider, and the third one has a larger number of results, so the axis unit labels are wider. All in all, the three actual bar charts (less axis labes and legend) differ in where they begin and where they end, which I find unsatisfying given that they should show the same time span (see screenshot).
So now my question is, how do I get these to begin and end on the same level? I've found this answer from 2013, but it seems that the "charting.legend.labelStyle.maximumWidth"-option only works with Flash Charts (which I don't use). I also can't seem to get anywhere with CSS as the elements of the chart are some low-level svg elements, and I don't see how to give them a fixed width or something like that.
@jeffland, since the Splunk chart is heavily built with SVG and all the components adjust dynamically based on values of other components. Hence, messing around with various components of the chart without impacting others is nearly impossible unless done from code.
See if following workaround fits the need.
Color by Values with Automatic option
(this applies similar colors as Series Color
. If you have Field Colors
applied for your chart instead of default/manual Series Colors then you will have to use Define Rules
instead of Automatic.)
Following is the Simple XML Dashboard code as explained above:
<dashboard>
<label>Align Charts with Legend on Right</label>
<row>
<panel id="panelTimechartLogLevel">
<html depends="$alwaysHideCSSHtmlPanel$">
<style>
#panelTimechartLogLevel,
#panelTimechartComponent{
width:75% !important;
}
#panelLegendLogLevel,
#panelLegendComponent{
width:25% !important;
}
#tableLegendLogLevel,
#tableLegendComponent{
margin-top:20% !important;
}
</style>
</html>
<chart>
<search id="baseLogLevel">
<query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count 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">0</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.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">none</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>
<panel id="panelLegendLogLevel">
<table id="tableLegendLogLevel">
<search base="baseLogLevel">
<query>| head 1
| fields - _time
| transpose column_name="Legends"
| search Legends!="_*"
| table Legends</query>
</search>
<option name="drilldown">cell</option>
<option name="refresh.display">progressbar</option>
<format type="color" field="Legends">
<colorPalette type="sharedList"></colorPalette>
<scale type="sharedCategory"></scale>
</format>
</table>
</panel>
</row>
<row>
<panel id="panelTimechartComponent">
<chart>
<search id="baseComponent">
<query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count by component limit=2 useother=f</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">0</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.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">none</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>
<panel id="panelLegendComponent">
<table id="tableLegendComponent">
<search base="baseComponent">
<query>| head 1
| fields - _time
| transpose column_name="Legends"
| search Legends!="_*"
| table Legends</query>
</search>
<option name="count">10</option>
<option name="drilldown">cell</option>
<option name="refresh.display">progressbar</option>
<format type="color" field="Legends">
<colorPalette type="sharedList"></colorPalette>
<scale type="sharedCategory"></scale>
</format>
</table>
</panel>
</row>
</dashboard>
Problem with this is that you can not holde the mouse over a legend so that its data get highlighted.
It becomes separated data.
This is some I like as well.
Putting the legend below is not a good solution for me.
I would like the x axis to be align for more than 10 dashboards.
This would help me to see fault across different various of messages.
I want this as well. 🙂
I'm trying to build dashboards that help my users understand the relationships between different characteristics of our systems over time.
I spent some time trying to figure out how to possibly scale the SVG components, but like you, I didn't get there. The SVG/HTML charting seems to use HighCharts and those definitely allow for these kinds of control, but I haven't been able to understand where I might inject changes into the Splunk JS stack (Mr. Sparkle?)
If I figure anything out, I'll give you a shout. 🙂
That would be nice, also for anyone else coming here searching for a solution.
The simplest way is to move your legend to the bottom. Click Edit
-> Edit Panels
. Then click the paint brush icon (last/rightmost one) and select Legend
and click on the top listbox and select Top
or Bottom
.
That might help with the differently sized legends, but it doesn't with the axis labels. At any rate, it changes how the entire dashboard looks, and I would prefer if the legend stayed to the right of the charts - just with an adjustable width.