TABLEAU DESIGN

STYLE GUIDE RECOMMENDATIONS

©2023 phData, Inc. All rights reserved. Confidential and Proprietary.

Contact phData at info@phData.io

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 1

CHARTS

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 2

TABLES
Principles
• Tables are okay to use
• Font size no less than 9pt
• Use divider lines; no row banding
• Bold column headers
• Row size 2-3x font size

Resources
Ultimate Guide to Tables in Tableau (Part 1)
26 Ways to Enhance your Tables in Tableau
Advanced: Ultimate Guide to Tables in Tableau

Alternatives
• Bar Chart: Size of bars allow for quickly
identifying values
• Heat Map: Use color and text to quickly
identify values

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 3

KPI
Principles
• Highlight the number, not the metric
• Put label next to text
• Minimize number of sheets used

Resources
KPI Design Ideas for Tableau
22 Different BAN Designs
KPI Options

Alternatives
• Table: When there are many KPIs,
consolidate
to a table
• Bullet Chart: Compares value to a target

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 4

BAR CHARTS
Principles
• Used to compare values between groups
or over time
• Always start axis at zero
• Label bar or axis, not both
• Use horizontal bars over vertical bars
• Use single color

Resources
When to Use Horizontal Bar Charts vs. Vertical
Column Charts
3 Ways to Make Beautiful Bar Charts in Tableau
Histograms and Bar Charts

Alternatives
• Histogram: Use when trying to understand
distribution of a single category’s values
• Lollipop Chart: Visually less aggressive with
higher values
• Dot Plot: Uses dots instead of bars to depict
values of category
• Bar-on-bar Chart: Used to display
differences between two points
• Line Chart: Shows data trending over time

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 5

SINGLE AREA CHARTS
Principles
• Include time series on x-axis and values on
y-axis
• Start y-axis at zero
• Used to show trending over time
• Use single color

Resources
What to consider when creating area charts
A Complete Guide to Area Charts
Tableau Area Chart – A Guide to Create your
First Area Chart

Alternatives
• Line Chart: A simpler view of data trending
without shaded area below line
• Bar Chart: Size of bars allow for quickly
identifying values

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 6

STACKED BAR & AREA CHARTS
Principles
• Use five groups or less; if more than five
include ‘other’
• Use horizontal bars instead of vertical bars
• Use colors shades within same family OR
distinctly different colors
• Label bar or axis, not both
• When possible, decouple bars and use
small multiples

Resources
A Little Design Makes a World of Difference
How to take the “screaming cats” out of
stacked bar and area charts

Alternatives
• Cleveland Dot Plot: Use when exact value
is important to know; easier to compare
groups within time period
• Small Multiples: Use when exact value is
important to know

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 7

LINE CHARTS
Principles
• No more than six lines on a single chart
• Passes at least four points in time

Resources
Visual Analysis Best Practices
3 Ways to Make Lovely Line Graphs in Tableau

Alternatives
• Cleveland Dot Plot: Use when exact value
is important to know; easier to compare
groups within time period
• Slope Chart: Use when there are not enough
points in time, but limit to two points.

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 8

SPARK CHARTS
Principles
• Used to show general pattern
• Do not show axis or labels
• Maintain zero line
• Use tooltips if possible

Resources
How to Show KPIs & Sparklines in the Same
Graph
How to Make Sparklines in Tableau
Learn How to Create Advanced Tableau
Sparklines Today

Alternatives
• Table: Use when seeing values is necessary
• Line Chart/Bar Chart: Use when seeing
patterns and values

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 9

SCATTER PLOTS
Principles
• Use when wanting to identify patterns
and understanding relationships between
variables
• Clearly label axis
• Use color or shape for marks, but not both
• Lower transparency and add outlines for
overlapping marks
• Consider reference lines to make patterns
more clear

Resources
3 Ways to Make Stunning Scatter Plots in
Tableau

Alternatives
• Slope Chart: Use to easily show relationship
of categories between variables
• Heat Map: Use to show exact values of
variables while providing relationship
between variables

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 10

PARETO
Principles
• Use when highlighting 80/20 principle
• Always sort values descending
• Use tooltips, actions, and dynamic
references lines to add context
• If there are more than 15 members use a
continuous x-axis
• User color to delineate negative values

Resources
3 Ways to Make Powerful Pareto Charts in
Tableau
Pareto Charts in Tableau
Tableau 201: How to Make a Pareto Chart

Alternatives
• Slope Chart: Use to easily show relationship
of categories between variables

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 11

WATERFALL
Principles
• No more than 10 categories
• Use horizontal lines to connect bars
• Start x-axis at zero
• Differentiate positive and negative values
with color
• First and last bars start/end at zero

Resources
Tableau 201: How to Make a Waterfall Chart
3 Ways to Make Wonderful Waterfall Charts in
Tableau
How to Build a Waterfall Chart with Multiple
Measures

Alternatives
• Stacked Bar Chart: Use each bar to represent
the whole and segments to represent the
the parts/categories of the whole
• Table: Display each value and how that
value changes with each part/category

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 12

PIE CHART
Principles
• Keep pie charts to 2-3 slices
• Use to show percent of total rather than
actual value
• Use category on color rather than a value
• Sort slices by size
• Do not use pie if negative values are possible

Resources
Friends Don’t Let Friends Make Pie Charts

Alternatives
• KPI: KPIs are better with displaying single
values with no points of comparison
• Bar Chart: Use a bar chart for a faster
comparison between values
• Dot Plot: Use a dot plot for faster
comparison between values

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 13

DONUT CHART
Principles
• Use KPI principles for text
• Use pie principles for donut
• User border to separate sections of donut
• Text should fit within the hole
• Do not label part of donut

Resources
Donut Charts
Tableau Playbook - Donut Charts

Alternatives
• KPI: KPIs are better with displaying single
values with no points of comparison
• Bar Chart: Use a bar chart for a faster
comparison between values
• Dot Plot: Use a dot plot for faster
comparison between values

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 14

TREEMAPS
Principles
• Appropriately label to clearly indicate
larger sections
• Use color to add valuable context
• Group values in part of whole or in a
hierarchy

Resources
Tableau Playbook - Treemap

Alternatives
• Bar Chart: Use a bar chart for a faster
comparison between values
• Dot Plot: Use a dot plot for faster
comparison between values
• Lollipop Chart: Use a dot plot for faster
comparison between values

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 15

PACKED BUBBLES

Principles
• Appropriately label to clearly indicate
larger sections
• Use color to add valuable context
• Do not use to show hierarchical
relationships

Resources
Tableau Essentials: Chart Types – Packed
Bubbles

Alternatives
• Bar Chart: Use a bar chart for a faster
comparison between values
• Dot Plot: Use a dot plot for faster
comparison between values
• Lollipop Chart: Use a dot plot for faster
comparison between values

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 16

BOX PLOT
Principles
• Use to compare/show distribution of
categories
• Do not use for executive level stakeholders
• Utilize opacity and color to emphasize
distribution of marks

Resources
Tableau Tips & Options for Box and Whisker
Tableau 201: How to Make a Box-and-Whisker
Plot

Alternatives
• Histogram: Use to show overall distribution
without exactness
• Dot Plot: Use a dot plot to show five number
summary
• Stacked Bar Chart: Use a stacked bar chart
to show five number summary

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 17

MAPS
Principles
• xxxxx

Resources
xxxx

Alternatives
• xxxx

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 18

FORMATTING

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 19

USE OF TEXT
Principles
• Context is important; label charts, colors, etc.
• Be concise; don’t clutter dashboard with text
• Use dynamic text if possible to eliminate
technical debt
• Follow font principles

Resources
Ten Tableau Text Tips

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 20

FONTS
Principles SECTION STYLE
• Use font hierarchy for consistency
• No font smaller than 8pt Title
Tableau Medium 24pt
• Use fonts universally available
Subtitle Tableau Light 12pt #777777
• Use browser-friendly fonts and use sans-
serif fonts if possible Header Tableau Semi-Bold 14pt #3c3c3c
Resources Sub Header Tableau Light 12pt #777777
Demystifying Fonts in Tableau
Axis Tableau Medium 9pt #777777
How to Design a Typographic Hierarchy in
Tableau Label Tableau Light 8pt #3c3c3c

How to use fonts in Tableau?

Note Tableau Medium 8pt #3c3c3c
Use Custom Fonts in Tableau Server
Warning Tableau Bold 9pt

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 21

PADDING
Principles
• All objects should use at least 10px inner
and 5px outer padding
• Spacing between objects 10px minimum,
but be consistent
• Set all padding to zero when combining
elements then apply above principles for
combined elements
• Increase padding between elements until
it feels uncomfortable then reduce to
comfort

Resources
Outer and Inner Padding in Tableau
Dashboards
Dashboard Element 5: White Space
Padding Matters - Tableau in 90 Seconds
What’s the difference between inner and outer
padding on a …
Mastering Containers in Tableau (Part 2) -
Performance Monitoring …
Dashboard Element 5: White Space

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 22

COLOR
Principles
• Use single, primary color with tints
• Apply secondary color sparingly or to
highlight certain elements
• Use the same color consistently through
dashboard
• Use colorblind friendly colors
• Clearly label what colors are being used for

Resources
8 Rules for Optimal Use of Color
Picking the Right Colors
Color Theory Dos and Don’ts

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 23

CONTAINERS
Principles
• Put all dashboards objects into containers
• Only keep containers that add to
organizational structure of dashboard
• Name containers

Resources
Things I Know About Tableau Layout
Containers
How I Use Layout Containers (Part 1)
Mastering Containers in Tableau (Part 2)

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 24

ORGANIZATION & ALIGNMENT
Principles
• Design around story that is being told
• Put most important information in the top-
left of dashboard
• Consider Gestalt Principles
• Label items on dashboard appropriately
• Create rows and columns with dashboard
items to help user understand flow of
dashboard

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 25

GRID LINES
Principles
• Only use gridlines on continuous axes
• Use tones to blend grid lines with
background color
• Underemphasize grid lines relative to chart

Resources
Grid Lines: Chart Junk or Visual Aids?

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 26

BORDERS
Principles
• Use neutral colors that complement
background
• Keep borders consistent on similar items
• Use different borders for header and line
items
• Do not use border around object unless it is
a transition

Resources
Simple Formatting Tricks
Formatting Chart Lines in Tableau

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 27

MENUS & FILTERS
Principles
• Place global menus and filters at the top
right of dashboard
• Place visual specific filters directly above
visual
• Format filters to use apply buttons and
display relevant values only
• Consider filter and set actions

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 28

CHART TYPES

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 29

CHART TYPES
1. Alluvial Diagram 23. Choropleth (Bin Map) 44. Heat Map (Map) 65. Pyramid Graph 86. Strip plot
2. Area Chart 24. Comet Chart 45. Histogram 66. Radar Graph 87. Stacked bar chart
3. Arc chart (semicircle 25. Compound Histogram 46. Horizon Graph 67. Radial Highlight Table 88. Step Chart
typically used for 26. Connected Scatterplot 47. Icicle plot 68. Radial Time Series 89. Steamgraph
politics) Chart
27. Contour Plot (Map) 48. Isogram 90. Sound speaker chart
4. Arc Diagram 69. Radial Bar Chart (Radar-like)
28. Coxcomb Plot 49. Line Chart
5. Bar Chart (Connected Area Plot) (outward) 91. Sunburst Diagram
50. Line Map (Map)
6. Bar-Line Dual Axis Plot 29. Density Plot 70. Radial Bar Chart 92. Table
51. Marginal Histogram
7. Barcode Chart (around)
30. Difference Chart 52. Merrimekko Chart 93. Ternary Plot
8. Barbell Chart 71. Ridge line plot (joy
31. Donut Chart (Mosaic Plot) 94. Timeline
plot)
9. Baseline Chart 32. Density Dot Map 53. Merrimekko Baseline 95. Timeline (curved)
72. Rounded Bar Charts
10. Beeswarm 33. Dot Map chart 96. Timeline w/ Circles
73. Sankey Diagram
11. Binned Scatterplot 34. Dot Plot 54. Network Graph 97. Tree Map
74. Scatterplot
12. Box plot 35. Equalized Cartogram 55. Org Chart 98. Unit Chart
75. Seismogram
13. Bubble Chart (Map) 56. Packed Bubbles 99. Variable Width bar
76. Slope chart
14. Bullet Chart 36. Force-Directed 57. Pie Chart chart
Diagram 77. Small Multiples
15. Bump Chart 58. Parallel Coordinates 100.Venn Diagram
37. Funnel Chart 78. Sparkline
16. Bump Chart with Curve 59. Pareto 101. Voronoi Diagram
38. Gantt Chart 79. Spike map (Map) (Map)
17. Calendar 60. Plum Pudding Waffle
39. Gauge Chart 80. Spine Chart 102. Waffle chart
18. Candlestick Plot
40. Glyph Chart 61. Pictorial Stacked Chart 81. Spiral chart 103. Word Cloud
19. Cartogram (Map)
41. Grid Map (Map) 62. Polar Chart (Radar w/ 82. Square pie chart
20. Chord Diagram
42. Heat map two lines) 83. Steamgraph
21. Chord Diagram w/
Lines 43. Heat map from 63. Progress Bar 84. Stepped Line graph

22. Choropleth (Hex Map) Tableau 64. Proportional Symbol 85. Symmetrical Dot Plot
Map (Map)

TABLEAU DESIGN STYLE GUIDE RECOMMENDATIONS 30