Splunk® Enterprise

Developing Views and Apps for Splunk Web

Splunk Enterprise version 9.0 will no longer be supported as of June 14, 2024. See the Splunk Software Support Policy for details. For information about upgrading to a supported version, see How to upgrade Splunk Enterprise.

Design guidelines

To create a user experience that is consistent with standard Splunk visualizations, follow these guidelines.

Visualization picker

Custom visualization preview icons, labels, and descriptions appear in the Visualization Picker user interface.
7.1 viz picker.png


Create a custom visualization preview icon. Follow these screenshot guidelines.

Recommendation What to do What to avoid
preview.png Provide a preview.png file in the app directory.

Tree map preview icon preview.png
If no screenshot is available, a generic image appears.
6.4 mod viz generic icon.png Difficult to identify or find
detail Use an appropriate detail level in the screenshot.

Tree map preview icon Detailed visualization preview
These visualization icons are difficult to understand.
6.4 mod viz avoid screenshot.png Not enough detail
6.4 mod viz also to avoid icon.png Too much detail
size Use an 116px by 76px image. Make sure that the image fills the available space fully.
Tree map preview icon No gaps or borders
Do not use a screenshot with gaps or borders.
6.4 mod viz screenshot gaps avoid.png Icon has gaps


Provide a visualization label and description to display in the Visualization Picker. List these attributes in the custom visualization visualizations.conf stanza.

Example visualizations.conf stanza

label = Single Value
description = Track a metric with context and trends.


Character limits
Make sure that all strings in visualizations.conf follow these character limits before publishing the app.

  • Label: 30 characters
  • Description : 80 characters
  • Search fragment: 80 characters

Description best practices

Recommendation What to do What to avoid
Help users decide whether to use the visualization. Tell users what they can do with the visualization.

Best practice: "Track a metric and trends over time."
Do not describe what the visualization looks like.

Avoid: "This visualization has a circle with an arrow."
Use active voice to engage users. Focus on a task that users can accomplish.

Best practice: "Show how a metric varies across geographic regions."
Avoid technical descriptions of components.

Avoid: "This visualization has a map that can be used with searches that generate an aggregate value."
Keep the description minimal. Convey only the necessary information.

Best practice: "Compare values or fields."
Do not repeat the visualization name.

Avoid: "A color meter visualization shows a value in a range."

Best practice examples

  • Horizon chart
Use a baseline to show positive and negative changes for multiple time series.
  • Real-time location tracker
Show physical asset locations in real time.

Description template and terms

You can use the following components and term suggestions to create a custom visualization description.

Component Suggested terms
What the user can do with the visualization
  • show
  • track
  • compare
  • plot
  • use
Information or behavior
What kinds of information or behavior the visualization shows
  • values
  • trends
  • metric
  • changes
  • relationships
  • fields
  • status
How the visualization presents information or behavior
  • over
  • in
  • against
  • in relation to
  • between
  • using
Key components
Visualization component that adds meaning or emphasis
  • baseline
  • dataset
  • range
  • map
  • region
  • time
  • context
  • trend indicator
  • sparkline
  • icon


Use the following settings for all chart axis, label, and legend text. For tooltip text guidelines, see Tooltips.

Lucida Grande typeface. Specify the CSS font-family property as shown here.
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica 
#3C444D (Dark gray)
Label settings
1. X- and Y-axis titles 2. Tick mark labels

6.4 mod viz axis label text.png






Use one of the following color palettes.

Semantic colors

Use semantic colors to show meaning. For example, these colors can indicate value ranges in a results set.

Hex values Palette


7.1 semantic spectrum.png

Categorical colors

Categorical colors show how results belong to different categories.

Hex values Palette

7.1 categorical colors 1.png
Hex values Palette

7.1 categorical colors 2.png
Hex values Palette

7.1 categorical colors 3.png

Divergent colors

Divergent colors emphasize high and low values in a results set. Shades for values between the maximum and minimum depend on the number of bins configured for results.

Hex values Palette


7.1 diverging colors.png

Sequential colors

Sequential colors emphasize high values in a results set. The following hex values correspond to base colors for maximum values. Show minimum values using a lighter version of the base color.

Ensure that the minimum value appears in a visualization by using a value no lighter than 10% of the base color. Colors for values between the maximum and minimum are set according to the number of bins configured for results.

Hex values Palette


6.4 mod viz sequential palette.png


Proper spacing between tick marks, labels, and legends makes a visualization look clean and legible. Follow the spacing and margin guidelines shown here.

Custom Viz Layout Guidelines.png


Between Use this spacing
Y-axis label and visualization 10px
X-axis label and tick mark labels 10px
Visualization and legend 20px
Tick mark labels and visualization 5px


Set a 15px margin around the visualization panel.

Chart elements

Axis and gridline color

Keep gridlines and axis lines muted to maintain user focus on the data. Use the color settings shown here.

Custom Viz Axis gridlines chart.png

Axis lines

Legend swatch

Use a 16x12px swatch for each item in a legend.



Text settings

Size Line-height Color
6.4 mod viz tooltip guideline.png 1. 12px 16px #CCC
2. 12px 16px #FFF
3. 12px N/A category color

Pointer position
Position the tooltip pointer at the center of any tooltip edge.

Display size variation

Make sure that the custom visualization accommodates different display sizes.


Scale horizontally when panel or window size changes
Best practice: Adjust all elements so that the visualization scales the whole width.
Avoid: Do not use fixed sizes for horizontal dimensions.
Implement a responsive design
Best practice: For small display widths, hide unnecessary labels and other elements.

Last modified on 26 August, 2020
Data handling guidelines   Custom visualizations in Simple XML

This documentation applies to the following versions of Splunk® Enterprise: 7.1.0, 7.1.1, 7.1.2, 7.1.3, 7.1.4, 7.1.5, 7.1.6, 7.1.7, 7.1.8, 7.1.9, 7.1.10, 7.2.0, 7.2.1, 7.2.2, 7.2.3, 7.2.4, 7.2.5, 7.2.6, 7.2.7, 7.2.8, 7.2.9, 7.2.10, 7.3.0, 7.3.1, 7.3.2, 7.3.3, 7.3.4, 7.3.5, 7.3.6, 7.3.7, 7.3.8, 7.3.9, 8.0.0, 8.0.1, 8.0.2, 8.0.3, 8.0.4, 8.0.5, 8.0.6, 8.0.7, 8.0.8, 8.0.9, 8.0.10, 8.1.0, 8.1.1, 8.1.2, 8.1.3, 8.1.4, 8.1.5, 8.1.6, 8.1.7, 8.1.8, 8.1.9, 8.1.10, 8.1.11, 8.1.12, 8.1.13, 8.1.14, 8.2.0, 8.2.1, 8.2.2, 8.2.3, 8.2.4, 8.2.5, 8.2.6, 8.2.7, 8.2.8, 8.2.9, 8.2.10, 8.2.11, 8.2.12, 9.0.0, 9.0.1, 9.0.2, 9.0.3, 9.0.4, 9.0.5, 9.0.6, 9.0.7, 9.0.8, 9.0.9, 9.1.0, 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.2.0, 9.2.1

Was this topic useful?

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