Skip to main content

​
A Quick Guide

Palette TypeUse WhenBest for Chart Types
Monochrome default
  • Visualizing data with a natural order or progression
  • Showing increasing or decreasing values (e.g. volume, intensity, time)
  • Bar charts
  • Grouped bar charts
  • Stacked bar charts
  • Donut charts
Pattern
  • Used as the second visual variable in charts with four variables and under.
  • Bar charts
  • Grouped bar charts
  • Stacked bar charts
  • Donut charts
Categorical Palette
  • Displaying 5+ distinct values
  • Data visualizations with over 5+ variables
Semantic (Status)
  • Showing deviation from a central point (e.g. baseline, average, or target)
  • Semantic colors showing positive, negative, and neutral
  • Emphasizing both direction and magnitude of change
  • Bar charts

​
Color Palette

Utilize this monochrome palette in this specific order for charts with 4 variables or less.
default, dark, pattern, and outline for the blue palette

​
Variable Ordering

1 Variable2 Variables3 Variables4 Variables5+ Variables
If your chart has one variable, start with the default hue in the palette.If your chart has two variables, use the default and dark blue.If your chart has three variables, add the diagonal pattern.If your chart has four variables, add the lightest blue with a stroke.For five + variables, see our extended color palette.
1 variable, blue palette2 variables, blue palette3 variables, blue palette4 variables, blue palette5 plus variables, categorical palette
One Variablevariable ordering, 1 variable
Two Variablesvariable ordering, 2 variables
When adding a 4th variable to a stacked bar chart, place it at the bottom to support visual accessibility and maintain consistency.
Three Variablesvariable ordering, 3 variables
Four Variablesvariable ordering, 4 variables

​
General Design Guidelines

​
Bar charts

bar chart with three variables
  1. Top left and right corner: Border radius is 4px
  2. Space between bars: Space between bars should abide by Anvil spacing rules and be appropriate for the width of the total graph
  3. Stroke and pattern: The lightest color and pattern requires a 1px stroke for accessibility

​
Grouped bar charts

grouped bar charts, each with three variables
  1. General guidance from Bar Charts apply: See guidance above
  2. Space between bars: Space between bars should abide by Anvil spacing rules and be appropriate for the width of the total graph
  3. Space between sections: Space between bars should abide by Anvil spacing rules, should be larger than the space between bars, and be appropriate for the width of the total graph

​
Stacked bar charts

three stacked bar charts, each with three variables
  1. General guidance from Bar Charts apply: See guidance above
  2. Space between sections: 4px spacing is recommended

​
Donut charts

donut bar chart with four variables
  1. Space between pie sections: 4px spacing is recommended
  2. Direct labeling: It’s best practice to have the value directly on the corresponding donut slice. If this is not possible, a hover state is required. More info on direct labeling here.

​
Real Example

The following is a possible real-world example. This example displays multiple datasets on a single page, including a donut chart, a single stacked bar chart, a horizontal bar graph, and a larger bar graph all utilizing our monochrome palette. page with several donut charts and a stacked bar chart

Questions? Challenges?

Contact the Visual Design team on the #ask-vizd channel
Last modified on March 9, 2026