What’s New in FF Chartwell

Travis Kochel
Scribble Tone
Published in
3 min readMar 9, 2016

It’s been five years since the first version of Chartwell was released. With the help of the awesome team at FontFont, it has come a long way. Recently we released a big set of updates to the package. Here’s what’s changed.

  • New chart styles
  • Floating variants (Bars Vertical, Areas, and Rings)
  • Reference bar option (Lines, Areas, Bars Vertical, Floating Areas, and Floating Bars Vertical)
  • Added grids for old styles (Areas, and Bars Vertical)
  • Light decimal support (all styles)
  • Renamed Lines to Areas

New Chart Styles

Lines

The highly requested lines chart style is finally here! It comes in six new weights, which live in separate fonts. Note that the previously known Lines style has been renamed to Areas.

All six weights of Lines

Scatter

These are helpful in showing trends and clustering in large quantities of data over an x and y axis. This style makes use of a new coordinate based syntax. Add dots using comma separated coordinates, and size them with an optional third value.

Scatter

Bubbles

If you need to quickly generate a bunch of circles sized relative to each other, this is the way to go.

Bubbles

Floating Variants

These new styles may look similar to the original styles, but the difference is they can show a range of data. Floating Bars Vertical, Floating Areas, and Floating Rings use the new coordinate syntax, also implemented in Scatter, allowing you to set a starting value in addition to the ending value.

Floating Bars Vertical
Floating Areas
Floating Rings

Reference Bar Option

Sometimes it can be helpful to have a reference line, to help compare values at the beginning or end of a chart. A new indicator glyph has been added Lines, Areas, Bars Vertical, and the new floating variants. Append a ‘+x53’ to the end of your string and color as desired. Substitute the number ‘53’ with your desired reference value.

Reference bar used with Floating Bars Vertical

More Grids

Background grids have been added to the old styles of Areas and Bars Vertical, as well as their new variants. Use prepend strings with a-f.

Light decimal support

All styles, new and old, now support decimals of up to two places. The exact values aren’t represented, but will be rounded to the nearest integer. Note that this only supports a decimal dot/period formatting, rather than a decimal comma.

Renamed Lines to Areas

As many have pointed out, the old Lines style was incorrectly named. Given that there is now a real line chart style, we decided to fix this. What used to be known as Lines is now Areas.

--

--