Charts

[ Anatomy of a Chart ] [ Chart Types ] [ Formatting Quick Reference ] [ Principles & Best Practices ]

Principles & Best Practices

[ Titles and subtitles ] [ Axes ] [ Colors ] [ Legends ] [ Callouts ] [ Sources and disclaimers ]

Anatomy of a Chart

For details about technical specifications of charts see Chart Body.

Formatting Quick Reference

• General Typography

  • FEWS NET uses the Segoe UI and Open Sans typefaces for most text. Segoe UI is preferred when available, while Open Sans is used in Google Suite products and elsewhere as a fallback for Segoe UI.

  • FEWS NET uses the Georgia typeface for official headlines only. Tinos may be used as a fallback for Georgia.

• Titles and subtitles

  • Use titles that describe the topic and geographic context

  • Use subtitles that include any time-relevant information

  • Use title specifications in title guidelines.

  • Use sentence case for titles, following guidelines in capitalization guidelines.

• 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

  • Use typography guidelines in typography guidelines.

• Colors

  • Use color swatches and order specified in the brand guidelines and color order.

  • When representing data series using lines or bars, use colors in the following order.

    It is recommended that charts do not contain more than 6 line/bar colors, but additional colors are available below. These colors were chosen to ensure the best possible contrast on the web for 6 lines against each other and a White/Background fill. 

    • Blue 600: RGB(66, 111, 188), #426FBC

    • Green 400: RGB(49, 155, 134), #319B86

    • Charcoal 600: RGB(58, 69, 76), #3A454C

    • Orange 500: RGB(186, 107, 85), #BA6B55

    • Red 500: RGB(122, 90, 90), #7A5A5A

    • Steel 600: RGB(85, 116, 126), #55747E

• Legends

  • Use legend specifications in legend guidelines.

• Sources and disclaimers

  • Always include any necessary disclaimers and sources for data used in the chart.

  • Use footer specifications in footer guidelines .

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. Color swatches available in chart color guidelines.

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 Sego UI or Open Sans for all text throughout the chart. Pay attention to font weight (for example, use Semibold for subtitles). Typography guidelines are available in the technical specifications for more details.

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.

Format dates for an international audience. If space permits, use the format Month YYYY. Otherwise, abbreviate to MMM YYYY to label ticks (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.

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

Follow brand guidelines. Use FEWS NET brand colors and avoid introducing new colors unless necessary. Follow brand guidelines and color order guidelines.

Ensure 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.

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 5–7 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.