Splunk® Enterprise

Dashboards and Visualizations

Download manual as PDF

Splunk Enterprise version 5.0 reached its End of Life on December 1, 2017. Please see the migration information.
This documentation does not apply to the most recent version of Splunk. Click here for the latest version.
Download topic as PDF

Chart customization

Splunk charts in dashboards and other views are highly customizable. You can make a wide variety of customizations through the Splunk Web UI with the Panel Editor, which enables you to change chart axis labels, define color ranges for gauges, configure stacking modes for column and bar charts, and much more.

When the basic customization options offered by the Panel Editor aren't enough, you can go "under the hood" and edit the panel XML directly to customize the appearance and behavior of your charts in additional ways. You can change axis label text styles, reverse chart axes, define specific color palettes for chart results, and much more.

You can customize the appearance of charts using either simple XML or advanced XML. The syntax for charts differs slightly between simple and advanced XML. For example, in simple XML syntax, charting controls are specified with option attributes. In advanced XML, you specify the same thing using params to a HiddenChartFormatter module. For code examples, see the "Chart colors" section, below, as well as the sections that follow.

This topic provides a few common customizations using both simple and advanced XML. For more information on building charts in simple XML, refer to Add a chart. Refer to the Custom Chart Configuration Reference in this manual for a complete list of available chart customizations.

Chart colors

You may want to set a specific set of colors for a series in a chart. To change chart colors, use the seriesColors property charting.seriesColors. The seriesColors property is the simplest way to adjust the colors of series in a Splunk chart. It is represented as a list of hexadecimal color values (0xRRGGBB values separated by commas and surrounded by brackets).

For example, in a simple XML dashboard:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
     <option name="charting.seriesColors">
       [0xFF0000,0xFFFF00,0x00FF00]
     </option>
   </chart>
  </row>
</dashboard>

In an advanced XML dashboard, use the charting options with HiddenChartFormatter:

...
<module name="HiddenChartFormatter">
  <param name="charting.seriesColors">
    [0xFF0000,0xFFFF00,0x00FF00]
  </param>
...

Series colors for Splunk charts are index-based, which means that a color is assigned to a particular series based on its index among all other series assigned to legend labels in a specific order. (This usage of "index" does not refer to Splunk event indexes or indexers). Given the seriesColors list defined above, the first series of a chart is assigned color 0xFF0000 (red), the second series 0xFFFF00 (yellow), and so on.

For example, in a simple XML dashboard:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
    <option name="charting.legend.labels">[error,warn,info]</option>
    <option name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00]</option>
   </chart>
  </row>
</dashboard>

In an advanced XML dashboard, use the charting options with HiddenChartFormatter:

...
<module name="HiddenChartFormatter">
  <param name="charting.legend.labels">[error,warn,info]</param>
  <param name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00]</param>
...

This assigns the series named error to the color 0xFF0000 (red) and the series named warn to the color 0xFFFF00 (yellow) (and so on) from the seriesColors list above.

However, if there are other charts in a view, this mapping is not necessarily be guaranteed. That's because all legends for all charts in a view are connected to a common "master legend" by default to synchronize their colors. The master legend determines the final label/series index mapping from the merged mappings of its "slave" legends. The first slave legend to be processed by the master legend (typically the first one in a view) has its labels placed before the labels of the next legend to be processed (minus duplicates). Therefore, error at series index 0 in the labels list above is not necessarily at series index 0 in the master list. To alleviate this problem, you can exclude a legend from synchronization by assigning its masterLegend property to null or an empty string.

For example, in a simple XML dashboard:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
    <option name="charting.legend.labels">[error,warn,ok]</option>
    <option name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00]</option>
    <option name="charting.legend.masterLegend"></option>
   </chart>
  </row>
</dashboard>

This guarantees a one-to-one mapping between the labels and seriesColors lists above.

But what if you want to assign a color to a particular series based on its name instead of its series index? In that case use the fieldColors property to map specific colors to particular fields. The fieldColors property is represented as a map of field/color pairs surrounded by curly braces:

<option name="charting.fieldColors">
  {"error":0xFF0000,"warn":0xFFFF00,"info":0x00FF00}
</option>

This example assigns the series named error to the color 0xFF0000 (red), the series named warn to the color 0xFFFF00 (yellow), and the series named info to the color 0x00FF00 (green). Although not required in this case, double quotes must surround field names containing any of these characters []{}(),:". Existing double quotes or backslashes in the field name must be escaped with a preceding backslash.

Brushes and palettes

The entire concept of a series "color" is a drastic simplification of how a series, or any other visual element in Splunk charts, is actually styled. For example, the default style of all series in Splunk charts is not a solid color at all--it's a gradient of two colors. The seriesColors property described earlier is actually a convenience property to simplify the complexity of how chart styles are really defined. If you're only interested in changing the default series color mappings of a chart, while keeping the rest of the default styling, then the seriesColors property will suffice. If, however, you want more elaborate styling beyond the default gradients or even beyond colors, you need to become familiar with the underlying brush and palette architecture.

All visual elements in Splunk charts, with the exception of text, are "painted" using brushes. A brush can paint fills, strokes, gradients, images, and even video. Some brushes can combine and layer these methods. For example, a Solid Fill Brush paints solid color fills, while a Solid Stroke Brush paints solid color strokes. There is also a Group Brush that paints with a group of brushes simultaneously. You might use the Group Brush to paint a solid color fill surrounded by a solid color stroke, for example.

Here's an example of how a custom brush with a solid red fill and 50% transparency might be defined:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
    <option name="charting.myBrush">solidFill</option>
    <option name="charting.myBrush.color">0xFF0000</option>
    <option name="charting.myBrush.alpha">0.5</option>
  </chart>
 </row>
</dashboard>

Charts often have several series to plot, which means they usually need several brushes, one for each series. But spending your time designing unique brushes for individual series for all the different chart visualization options doesn't scale, especially if you have views that include dozens of series. Instead, charts use brush palettes. A brush palette maps a series index to a brush. There are a variety of brush palettes for Splunk charts. The simplest brush palette is the Solid Fill Brush Palette, which generates a solid fill brush for each series in a chart.

To determine the color of each brush it generates, the Solid Fill Brush Palette uses another type of palette - a color palette. Similar to a brush palette, a color palette maps a series index to a color. For example, a List Color Palette maps a series index directly to a color from a specified list of colors. By default, if an index is out of range of the list of colors, it wraps around to the beginning of the list, essentially repeating the colors. The List Color Palette can optionally interpolate between the list of colors, instead of wrapping, to produce a range of colors that spans over the total number of series. The following example specifies a color palette that interpolates between red, green, and blue:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
    <option name="charting.myColorPalette">list</option>
    <option name="charting.myColorPalette.colors">[0xFF0000,0x00FF00,0x0000FF]</option>
    <option name="charting.myColorPalette.interpolate">true</option>
   </chart>
  </row>
</dashboard>

Property references

In order to use the color palette defined above to generate Solid Fill Brushes for a chart, reference it from the appropriate property of a Solid Fill Brush Palette. To reference a property to use as the value of another property, use the "@" symbol followed by the property name to reference (minus the "charting" prefix). The Solid Fill Brush Palette has a colorPalette property that expects a color palette as its value:

<option name="charting.myBrushPalette">solidFill</option>
<option name="charting.myBrushPalette.colorPalette">@myColorPalette</option>

Again use a property reference to create a Column Chart whose columns are painted using the brushes generated from myBrushPalette. The Column Chart has a columnBrushPalette property designed specifically for this purpose:

<option name="charting.chart">column</option>
<option name="charting.chart.columnBrushPalette">@myBrushPalette</option>

You can also use a property reference in the original definition of myColorPalette to reference another property defining the list of colors. This is exactly how the simple seriesColors property described earlier is wired up to the underlying default set of brushes and palettes in Splunk charts:

<option name="charting.myColorPalette.colors">@seriesColors</option>

Create chart options on the fly

You can define your own properties on the fly by simply declaring them. For example, the following declares a custom brush with a red solid fill:

   <option name="charting.myBrush">solidFill</option>
   <option name="charting.myBrush.color">0xFF0000</option>

You can assign a property to another property either by reference or copy. The "@" symbol denotes a property reference and the "#" symbol denotes a property copy (or clone). For example, to use the custom brush defined above as the background of the tooltip, you can use a property reference:

   <option name="charting.tooltip.backgroundBrush">@myBrush</option>

However, if you would like to use a brush that's the same as the custom brush defined above except it has an alpha transparency of 50%, you can clone it then modify the alpha property of the clone.

 
   <option name="charting.tooltip.backgroundBrush">#myBrush</option>
   <option name="charting.tooltip.backgroundBrush.alpha">0.5</option>

If you need to use either the "@" or "#" symbols as the first character of a string (for example, an axis title), you can escape it with a second symbol:

 
   <option name="charting.axisTitleY.text">## Of Downloads</option>
   <option name="charting.axisTitleX.text">@@Foo</option>
PREVIOUS
Form examples
  NEXT
Panel reference for simple XML

This documentation applies to the following versions of Splunk® Enterprise: 5.0, 5.0.1, 5.0.2, 5.0.3, 5.0.4, 5.0.5, 5.0.6, 5.0.7, 5.0.8, 5.0.9, 5.0.10, 5.0.11, 5.0.12, 5.0.13, 5.0.14, 5.0.15, 5.0.16, 5.0.17, 5.0.18


Was this documentation topic helpful?

Enter your email address, and someone from the documentation team will respond to you:

Please provide your comments here. Ask a question or make a suggestion.

You must be logged into splunk.com in order to post comments. Log in now.

Please try to keep this discussion focused on the content covered in this documentation topic. If you have a more general question about Splunk functionality or are experiencing a difficulty with Splunk, consider posting a question to Splunkbase Answers.

0 out of 1000 Characters