Beautifully functional charts

Designing charts can be hard. It is the ultimate balance of form and function.

We've all seen examples of bad charts. But it's difficult to describe what makes a chart good.

The characteristics of a good chart

The key priorities when designing any chart are:

• it needs to be easy to interpret;
• it should be easy to scan, even at a distance; and
• it should not commit any chart crimes (poor axis, labels, legends, etc.)

And, ideally, it should match the rest of your brand's design language.

Designing generative charts

Recently, I've been working on a project where charts will be generated on-the-fly by AI agents.

I needed to design the style guide and design system that the agents will use to create each chart.

This led me to create a general set of principles, which I then codified inside a style.md file:

1. Color

You often need a distinct colour palette, purpose-built for your charts.

Why? Because it can be difficult to retrofit your existing palette to work for all eventual chart layouts.

This new palette should be an extension of your base design system, but specifically designed for displaying different series of data on the same chart.

The goal is to maximise contrast (ideally >3:1 contrast ratio) between neighboring sets of data, whilst being cohesive with the core brand.

Choose colors that aren't too vibrant or bright, especially if using any green, orange, or red hues, to avoid users interpreting these as status/warning colors.

For example, a modern, accessible set of colors could be the following:

1. Series 1: Navy (e.g. #183B56)
2. Series 2: Orange (e.g. #D9772A)
3. Series 3: Teal (e.g #378873)
4. Series 4: Purple (e.g. #765A9E)
5. Series 5: Vermilion/Red (e.g. #C94432)

Note 1: Ideally, we would limit charts to only include 3 series of data in a single visualisation. Because users can ask the agent to generate any chart, we needed to extend to a maximum of 5 series, to offer more versatility.

Note 2: Obviously, the above color palette is tailored towards a light mode UI. Most colors will still work on a darker background, except you would need to boost the vibrancy and brightness or the navy and orange.

2. Spacing

Most charts are viewed at small sizes, on small screens, or shared via blurry screenshots.

For enhanced legibility, add gaps between neighbouring bars or segments.

Even a 2px gap, combined with a good color palette, can help dramatically boost legibility.

Another good principle is to design for focused/emphasised states for each line, bar, segment, etc. This way, if there is lots of data in a single chart, the agent can showcase just a given value that is of interest to the user.

3. Axes

There are many cases where chart values are grouped such that starting from an origin of 0,0 would make the chart much harder to read or be ultimately useful. In these cases, it is useful to have a ‘axis break’ design.

For example, you can start the y-axis closer to the distribution of values, making the values and trends much easier to read.

If you do this, you must include a break mark, e.g. the two diagonal lines that indicate a break in the continuous values on a given axis.

4. Guides & labels

It is useful, especially for bar/line/scatter charts, to add horizontal guidelines at key intervals.

Make sure these lines aren't too distracting from the actual chart values; they should just act as a soft guide for user's to gauge a given value.

It is also useful to add optional labels to each value/point. These labels can be displayed on hover, press, or if the agent decides to emphasise a given value or series.

Make sure these labels have a solid background and use a larger font size (e.g. 24px) for maximum legibility.

To conclude...

The goal of a chart is to be maximally useful, not to just look pretty.

Your charts must pass legibility before you can start worrying about brand cohesion.

But, ultimately, it is possible to design charts that are easy-to-read, that also fit into the wider visual language of your brand. It just requires a bit more work.