Chart Body

Components

• Chart content frame

  • Lines

  • Bars

• Axis titles

• Y-axis labels

  • Text

  • Tick

• X-axis labels

  • Text

• Pop-overs and tooltips, for live charts

Padding and spacing

• Chart body fills full width of the visualization frame

• Chart body height is fixed to the minimum height necessary to clearly convey the relevant data

• 0px top (calculated by Highcharts)

• 8px bottom (calculated by Highcharts)

  • 16px when x-axis title is present (calculated by Highcharts)

• 52px right side (calculated by Highcharts, can be set for the whole chart)

  • 16px when y-axis title is present

• 16px left side (calculated by Highcharts, can be set for the whole chart)

• 16px horizontal between y-axis title(s) and y-axis labels

• 2px horizontal between y-axis label and tick (calculated by Highcharts)

• 13px horizontal padding between left- and right-most x-axis labels and y-axes (calculated by Highcharts)

• 8px vertical between x-axis and x-axis labels

• 24px between x-axis labels and x-axis title, when present

• 60px minimum vertical space between y-axis labels

Layout and responsiveness (Rendered by Highcharts)

• Chart content frame width and height fills full space available

• Y-axis titles are vertically centered to y-axis

• X-axis title is horizontally centered to x-axis, when present

• Equal vertical space between each y-axis label

• Equal horizontal space to the left and right of each x-axis label

• Left-side y-axis label text hugs right, right side text hugs left

• Y-axis label text is vertically centered to y-axis tick, including bottom “0” label and top label

• Chart content frame scales down horizontally as width decreases until 609px width is reached, after which width and height scale down proportionally. (Calculated by Highcharts)

  • Note axis titles and labels remain the same size

Fills

Chart content background

Every chart should have rows of alternating colors to delineate divisions of y-axis values. Colors should alternate between White (#FFFFFF) and Background (#FAFAFA).

Data

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. 

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

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

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

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

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

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

If more than 6 colors are needed, additional colors should be used as follows:

1. Olive Green 500: RGB(112, 114, 87), #707257

2. Purple 500: RGB(161, 115, 179), #A173B3

3. Blue 700: RGB(48, 80, 136), #305088

4. Green 600: RGB(16, 113, 87), #107157

5. Charcoal 500: RGB(85, 94, 98), #555E62

6. Orange 600: RGB(185, 90, 56), #B95A38

7. Red 600: RGB(109, 65, 64), #6D4140 

8. Steel 500: RGB(106, 129, 136), #6A8188

9. Olive Green 600: RGB(96, 97, 58), #60613A

10. Purple 600: RGB(120, 69, 149), #784595

Lines

Typography

FEWS NET visualizations use the Segoe UI typeface unless specified otherwise. Use Open Sans if Segoe UI is not available.