Charts
Anatomy of a chart
Formatting quick reference
General typography
Use Segoe UI (or Open Sans) for all text
Specifications are listed by by element under Technical Specifications
Titles and subtitles
Use titles to describe the topic and geographic context
Use subtitles to describe time-relevant information
Use sentence case (see Capitalization)
Axes
Use descriptive labels including units of measure on both axes. Labels on the x-axis can be omitted when it represents units of time
Use consistent and standard intervals to properly describe the data without overcrowding the chart
Colors
Use no more than 6 line/bar colors per chart in the following sequence:
Blue 600: #426FBC
Pine 500: #319B86
Charcoal 600: #3A454C
Orange 500: #BA6B55
Red 500: #7A5A5A
Steel 600: #55747E
See Specifications for more color options
Legends
Sources and disclaimers
Always include any necessary disclaimers and sources for data used in the chart
Chart types
Choosing the correct chart type is crucial for effective data visualization because it directly impacts how well your audience can understand and interpret the information presented. The right chart highlights patterns, relationships, and key insights in your data, making complex information easier to grasp. A poorly chosen chart, however, can confuse or mislead viewers, obscuring the message and diminishing the value of the data. By selecting the appropriate chart type, you ensure that your data is both accurate and accessible, enabling informed decision-making and clear communication.
Use a line chart when:
Showing trends over time or other continuous data.
Comparing time-series data across multiple categories.
Emphasizing smooth progressions or fluctuations.
Use a bar chart when:
Comparing discrete categories or groups.
Emphasizing the magnitude of values in each category.
Showing non-continuous data or ranking items.
Use a box plot when:
Showing the distribution of data.
Comparing multiple data sets or groups.
Identifying outliers.
Displaying the spread of data.
Displaying the spread of data.
When you have large data sets.
Use a combine bar and line graph when:
Highlighting the interaction between two related variables.
Visualizing data with different scales, such as quantities and percentages.
Tracking progress toward goals or targets, where bars represent actual values and a line shows a target or threshold.
Principles and best practices
General
Use alternating bands in tables to improve readability. See Chart content background specifications.
Avoid featuring missing data. To the extent possible, try to use charts that include data for all the locations included in the scope of the chart.
Choose a meaningful timeframe that isn’t arbitrary. To the extent possible, when selecting a timeframe for a chart, choose one that best illustrates the key message or trend you want to highlight.
Use brand styles. In general, use Segoe UI or Open Sans for all text throughout the chart. Pay attention to font weight (for example, use Semibold for titles) and colors.
Titles and subtitles
Be clear and descriptive. The title should convey the key message or insight the chart is meant to highlight. Avoid vague or overly technical language.
Keep it concise. A title should be short but informative. Ideally, it should be no longer 15 words, which would limit it to about one or two lines.
Use active voice. Where possible, frame the title to emphasize the takeaway or trend being shown.
Align with the data. The title should reflect the main point of the data, summarizing what the viewer will understand after seeing the chart.
Demonstrate intent with the timeframe chosen. Use subtitles and other time-related text that make it clear why a timeframe was chosen.
Use consistent formatting. Ensure the font size, style, and placement of subtitles are consistent with FEWS NET visualization technical specifications.
Use the right tone. The tone of your titles and subtitles should be neutral and objective, especially when dealing with sensitive data.
Don’t be verbose. Don’t use titles that are unnecessarily lengthy or repeat details in the chart
Don’t use titles in title case. Don’t use inconsistent capitalization, and don’t capitalize everything. Instead, sentence case is preferred for titles.
Avoid overloading information. While subtitles can be more detailed, avoid cramming too much information that could distract or confuse the viewer.
Axes
Ensure legibility. Choose a readable font size and color contrast for axis labels and numbers. Ensure that even those with visual impairments can clearly read the chart.
Keep it simple. Keep the axis design simple and avoid unnecessary design elements that don't add to the interpretation of the data.
Use descriptive labels. Always label both the x-axis (horizontal) and y-axis (vertical) with clear, concise descriptions of what the data represents. If the x-axis includes a time scale, no axis label is needed.
Different time scales. When showing data from different time scales, it should be easily distinguishable.
Include units. Specify the unit of measurement in the axis label (e.g., percentage, currency, time) to avoid ambiguity.
Know when to use linear vs. logarithmic scales. Use a linear scale when values increase at a steady rate, and a logarithmic scale for values that grow exponentially. Make sure the scale fits the nature of your data.
Start at zero. As much as possible, it is strongly recommended to begin the x-axis and y-axis at zero to avoid distorting the data.
Rotate labels if needed. For long or densely packed labels, consider rotating them (especially on the x-axis) to 40° angles to prevent overlap. Consider reducing tick marks or shortening labels rather than packing labels.
Use subtle gridlines. Use light, subtle gridlines to help align data points to the axes without distracting from the main chart. Keep them muted (e.g., light grey) so they don't overpower the data.
Place labels appropriately. Ensure that axis labels are placed close to their respective axes for easy reference without interfering with the data.
Follow brand guidance for dates. If space permits, use the format Month YYYY. Otherwise, abbreviate to MMM YYYY (ex. Mar 2025 or Sept 2021). For a time series spanning multiple years, you might label the x-axis like: Jan 2023 | Jul 2023 | Jan 2024 | Jul 2024 | Jan 2025. See Dates.
Use consistent number formatting. If you're using decimal points, ensure consistency throughout the axis. Avoid mixing formats like "0.5" and "5,000" without explanation. If using currency, format consistently as "$1M, $2M, $3M" instead of mixing "$1,000,000" and "$2M."
Format large numbers succinctly. Use abbreviations for large numbers (e.g., "K" for thousands, "M" for millions) to avoid overcrowded labels. Use "10K" instead of "10,000."
Don’t crowd ticks and labels. Too many tick marks or labels can clutter the chart. Use fewer ticks or round numbers to make the axis easy to read.
Don’t use arbitrary time intervals. For time series data, use regular intervals (e.g., every month, year, or quarter) to maintain clarity.
Don’t disproportionately scale the chart. The aspect ratio of the chart should not distort the data. Stretching or compressing the axes can exaggerate trends. Use a consistent ratio to reflect the true relationship between variables.
Colors
Confirm 508 compliance. Ensure that colors have sufficient color contrast to meet 508 compliance standards. Section 508 a federal law that requires federal agencies to make their communication accessible to people with disabilities. Meeting the color contrast requirement ensures the visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Tools such as webaim.org are helpful for checking color contrast. See Color safety and recommended combinations.
Use shapes and patterns. Instead of just colors, consider using shapes or patterns to differentiate items, especially for colorblind accessibility.
Don’t use similar shades of color. Avoid using shades of the same color that are too difficult to distinguish
Avoid using more than 6 data colors per chart. Consider using symbols, dashed lines, and other techniques rather than using more colors than needed.
Legends
Use strategic placement. Place the legend in a location that doesn’t obstruct important data, typically to the right or below the chart.
Give the legend a title. Title the legend, “Legend” for clarity
Group related items together. If applicable, categorize using a bar or gray boxes for separation to help viewers understand the data more intuitively. See Legend technical specifications for more details.
Ensure clear separation. Make sure the legend does not overlap with the data being represented; this helps prevent confusion. Avoid describing redundant details in the chart that are already apparent in the title, subtitle, or elsewhere
Don’t include instructions. Don’t instruct the user where to click or look for details in the chart. Details should be apparent through labeling, titles, and callouts alone.
Keep it focused. Don’t include verbose language or describe redundant details in the chart that are already apparent in the title, subtitle, or elsewhere
Sources and disclaimers
Include sources with links. If appropriate, link to either the homepage of the entity that provided the data, or a direct link to the data used (if publicly available).
Visually separate sources. Include a space between sources when listing more than one.
Keep it focused. Don’t include verbose language or describe redundant details in the chart that are already apparent in the title, subtitle, or elsewhere.
Contact us if you have an application question or recommended addition to these standards.