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 Brand White (#FFFFFF) and Gray 150 (#FAFAFA).

Data

When representing data series using lines or bars, use colors in the following order. These colors were chosen to ensure the best possible contrast for 6 lines against each other and a White/Gray 150 fill.

Charts should not contain more than 6 line/bar colors (see Charts usage guidance). 10 additional colors are included in the sequence for rare cases where more than 6 colors are needed.

Order	Color style name	Hex value	RGB value
1	Blue 600	#426FBC	66, 111, 188
2	Pine 500	#319B86	49, 155, 134
3	Charcoal 600	#3A454C	58, 69, 76
4	Orange 500	#BA6B55	186, 107, 85
5	Red 500	#7A5A5A	122, 90, 90
6	Steel 600	#55747E	85, 116, 126
7	Olive 500	#707257	112, 114, 87
8	Purple 500	#A173B3	161, 115, 179
9	Blue 700	#305088	48, 80, 136
10	Pine 700	#107157	16, 113, 87
11	Charcoal 500	#555E62	85, 94, 98
12	Orange 600	#B95A38	185, 90, 56
13	Red 600	#6D4140	109, 65, 64
14	Steel 500	#6A8188	106, 129, 136
15	Olive 600	#60613A	96, 97, 58
16	Purple 600	#784595	120, 69, 149

Lines

Type	Thickness	Color	Additional Specifications
Axis	1px (1pt)	Gray 500 (#ADADAD)	Borders left, right, and bottom of chart content frame
Y-axis tick (left of axis)	1px (1pt)	Gray 500 (#ADADAD)	8px length
Y-axis tick (right of axis)	1px (1pt)	Gray 400 (#D1D3D4)	Fills width of chart content frame
Line (Data)	4px (3pt)	See Fills > Data

Typography

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

Style name	Font	Line height	Color	Additional specifications
Axis title	16px (12pt) Semibold	120%	Brand Black Dark (#090B09)	X-axis title should be horizontal X-axis title may be omitted if the unit is clear from the chart title Y-axis title should be vertical
Axis label	14px (10.5pt) Bold	120%	Brand Black Dark (#090B09)	X-axis labels should be at a 40 degree angle Y-axis labels should be horizontal Dates should use one of the following formats: YYYY (e.g., 2016) Mon-YY (e.g., Feb-17) DD Mon (e.g., 1 Aug or 22 Aug)

Contact us if you have an application question or recommended addition to these standards.