Charting with Chartwell

An exploration of capabilities and best practices for FF Chartwell from FontFont.

Bars Vertical

FF Chartwell Bars Vertical is best for plotting discrete data points (not continuous data points like time). Histograms are closely related and are used to display ranges of data such as the number of students who scored in a particular range on a test. They are best rendered with bars touching or close together, though FF Chartwell Bars Vertical isn't designed for this.

2.7 4 12 4.2 23.2 18.4 21.9 29.6

A makeshift horizon created with two separate bar graphs with one rotated via CSS. Similar design to a jobs chart used in the SOTU Address.

14.1 19.3 8.3 9.2 9.2
1 4 12 27 90 90 35
0 6 17 58 110 56

A (nearer) histogram created by overlapping two Chartwell bar charts. This is a representation of a typical bell curve seen in class grading.

Bars

FF Chartwell Bars are good looking but should be used with caution. Their diamond shape can introduce a margin of error to how people perceive their relative lengths. This design does work well for representing progress or parts of a whole.

156 956 = 556 556 = 356 756 = 956 156 =
10 = 40 = 60 = 70 = 80 = 110 = 170 = 220 = 250 = 320 = 390 = 480 = 580 = 620 = 520 = 390 = 400 = 450 =
450 = 400 = 390 = 520 = 620 = 580 = 480 = 390 = 320 = 250 = 220 = 170 = 110 = 80 = 70 = 60 = 40 = 10 =

A population pyramid created with FF Chartwell Bars. One chart is rotated and aligned with CSS. The bars seem to render better and are easier to compare at smaller sizes.

Lines

FF Chartwell lines is best for continuous values (along the x axis) like units of time. You shouldn't need to individually color the segments since they should represent the same data.

29 56 58 55 23 41 29 61

A basic area chart. Color alternates only to show segments clearly.

49 56 76 55 23 41 29 61
19 36 88 25 53 11 69 21

An area chart with two values overlapping. Opacity (with CSS) is used to avoid covering up data when one chart has a greater value than another.

68 92 164 85 76 52 98 82
19 36 88 25 53 11 69 21

A stacked area chart created by overlapping two charts and offsetting the values of the one in the back by the values of the one in front.

200 200 200 200 200 200 200 200
19 36 88 25 53 11 69 21

Another alternate on the stacked area chart meant to represent parts of a whole. You can graph percentages this way to show how relationships between two parts change over time.

Pies

Pie charts best represent parts of a whole. The fewer segments, the easier they are to compare. Convert values to percentages so they don't add up to more or less than 100%. Donut charts look good but they make perception of the segments a little more difficult. Pie charts are much better for comparing parts of a single whole and less effective for comparing segments between multiple pie charts. In that case a bar chart would be better.

35 65
10 30 60 H
14 21 36 29 W

Currently, if the total of the pie's values exceeds 100, the segments will begin to overlap. Large inner circles can make comparing segments harder.

Rose

FF Chartwell Rose is best for showing cyclical patterns in data. It's really more of a radial bar chart than a pie chart since the segments are all an equal portion of the whole. Unlike a bar chart, the segments all represent different values of the same data-type and should be color-coded similarly. FF Chartwell Rose comes with several background grids which make comparison easier.

d 78 90 34 41 49 50 39 37 49 52
c 78 79 34 61 55 39 80 39 27 44 29 52
48 29 14 31 15 29 70 31 11 14 19 42
a 78 79 64 61 79 85 59 67 79 72

A more complex versions layers 2 rose charts on top of each other to create a stacked value effect. It's a good practice to mark the starting segment with a different color (lighter blue on the right).

Rings

These rings are essentially bar charts arranged in a circle, making them harder to compare. The arrangement can enhance data in some instances, particularly in showing cyclical or time based data illustrating each line as a part of a whole (360 degrees).

b 46 80 67 53 49

It's important to note that the lines rendered are actually longer towards the outside of the circle so the grid lines become important.

Radar

Radar charts, also called petal glyphs, are a specialized chart type that fills areas between points emanating from a center. Coloring each segment different distracts form the idea that it's the points of the shape that really matter.

61 58 47 68 95 86 52
ex 45 30 61 38 40 69 90

Radar charts become more useful when you can layer two values. This is achieved here with 2 separate charts and CSS opacity. This comparison only works for a limited number of layered shapes.

← Return to FF Chartwell Comes to the Web on The Why Axis