Splunk® Enterprise

Developing Views and Apps for Splunk Web

Download manual as PDF

This documentation does not apply to the most recent version of Splunk. Click here for the latest version.
Download topic as PDF

Chart customization

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

For customization options not available from the Panel Editor, you can edit the panel XML directly to customize the appearance and behavior. 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, you specify charting controls 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. Refer to the 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 chart. Specify the colors with a list of hexadecimal color values delimited with commas. Place the list in square 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 charts are index-based. 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 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.

If there are other charts in a view, this mapping is not necessarily guaranteed. All legends for all charts in a view are connected by default to a common "master legend" 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.

You can assign a color to a particular series based on its name instead of its series index. 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 concept of a series "color" is a simplification of how a series, or any other visual element in charts, is actually styled. For example, the default style of all series in charts is not a solid color at all. It is a gradient of two colors. The seriesColors property described earlier is actually a convenience property to simplify the complexity of how chart styles are defined. If you are only interested in changing the default series color mappings of a chart, while keeping the rest of the default styling, then the seriesColors property is sufficient. If, however, you want 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 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 designing unique brushes for individual series for all the different chart visualization options does not 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 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

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
Overview of the custom chart configuration reference
  NEXT
About JSChart, Splunk Enterprise primary charting library

This documentation applies to the following versions of Splunk® Enterprise: 6.0, 6.0.1, 6.0.2, 6.0.3, 6.0.4, 6.0.5, 6.0.6, 6.0.7, 6.0.8, 6.0.9, 6.0.10, 6.0.11, 6.0.12, 6.0.13, 6.0.14, 6.0.15, 6.1, 6.1.1, 6.1.2, 6.1.3, 6.1.4, 6.1.5, 6.1.6, 6.1.7, 6.1.8, 6.1.9, 6.1.10, 6.1.11, 6.1.12, 6.1.13, 6.1.14, 6.2.0, 6.2.1, 6.2.2, 6.2.3, 6.2.4, 6.2.5, 6.2.6, 6.2.7, 6.2.8, 6.2.9, 6.2.10, 6.2.11, 6.2.12, 6.2.13, 6.2.14, 6.2.15


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