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

Icon

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

Description

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 

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

Guidelines

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

Action

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

Presentation

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

Text

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

Font

Lucida Grande typeface. Specify the CSS font-family property as shown here.

font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica

Color

#3C444D (Dark gray)

Label settings

1. X- and Y-axis titles 2. Tick mark labels

6.4 mod viz axis label text.png

Line-height

16px

Size

12px

Line-height

12px

Size

11px

Color

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 
[
'#DC4E41',
'#F1813F',
'#F8BE34',
'#53A051',
'#006D9C',
'#3C444D'
]

7.1 semantic spectrum.png

Categorical colors

Categorical colors show how results belong to different categories.

Hex values Palette 
[
'#006D9C',
'#4FA484',
'#EC9960',
'#AF575A',
'#B6C75A',
'#62B3B2',
'#294E70',
'#738795',
'#EDD051',
'#BD9872'
]
 7.1 categorical colors 1.png
Hex values Palette 
[
'#5A4575',
'#7EA77B',
'#708794',
'#D7C6B',
'#339BB2',
'#55672D',
'#E6E1A',
'#96907F',
'#87BC65',
'#CF7E60'
]
 7.1 categorical colors 2.png
Hex values Palette 
[
'#7B5547',
'#77D6D8',
'#4A7F2C',
'#F589AD',
'#6A2C5D',
'#AAABAE',
'#9A7438',
'#A4D563',
'#7672A4',
'#184B81'
]
 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 
[
'#236D9C',
'#EC9960'
]
[
'#62B3B2',
'#AF575A'
]
[
'#AF575A',
'#F8BE34'
]
[
'#F8BE34',
'#4FA484'
]
'#708794',
'#5A4575'
]
[
'#294E70',
'#B6C75A'
]

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 
[
'#1D92C5',
'#D6563C',
'#6A5C9E',
'#31A35F',
'#ED8440',
'#3863A0'
]

6.4 mod viz sequential palette.png

Layout

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

Spacing

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

Margin

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

Gridlines

#ebedef

Axis lines

#d9dce0

Legend swatch

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

Tooltips

Padding

10px

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.

Guidelines

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.