Under the sheets: Designing new charts

Get our internal product spec with all the details of our revamped charts.

This week we are launching an overhaul of Equals charting aesthetics. To mark the occasion we’re trying something new: we’re sharing our internal product spec for new charts. All 3,000 words. Unfiltered and unedited. The spec covers why we’re prioritizing charts work, our conceptual north star, and a lot of specific details that we got wrong the first time around. We hope you find it interesting.

---

Chart aesthetics revamp

Charts are our second highest area of customer feedback, second only to dashboards. Our current charts look OK when used at the default size, with one or two series, and with some twiddling of the settings. But ideally our charts look great at all sizes, with all datasets, and with minimal customization required to get there. The charts feedback from customers spans aesthetics and getting the chart to plot what you want ("data configuration"). This project only tackles chart aesthetics. We've incorporated the aesthetic feedback from customers and from our own opinions about how charts can be better. We are currently working on solving data configuration too, it will just be a separate project.

One of the higher level things we've heard about charts from users is a desire for more modern looking charts. They find the Equals charts "unsexy" compared to what they get in tools like Graphy. While I think we've missed the mark in our current implementation, the aesthetic direction is intentional. They are supposed to look pro. What you'd get from a management consultant or investment banker. However, that's not going to serve every use-case or audience, so part of this revamp will be adding a second theme to charts. This second theme will be called modern. Distinct from color palettes, themes will change more than just the colors of the series. Modern charts will have more rounded edges, use lighter grays for axes and labels, have different typography, etc.

Our current pro charts have a bunch of issues. There are no spacing breakpoints, so small charts have too much padding. The default colors aren't that nice. Charts and lines from other series are drawn on top of labels from other series. Data labels actually look bad more often than they look good. I could go on. Overall these details mean charts from Equals often just look a bit sloppy.

In revamping pro aesthetics, we looked at a 100+ examples of great charts from organizations like McKinsey, Goldman Sachs, and the NY Times. With this research, we redesigned all of our charts from scratch. We have new specs for every detail – labels, typography, colors, axes, defaults. For our new modern charts, we also looked at a number of best in breed tools for inspiration. I think we've come up with something pretty compelling. The rest of the doc will talk about the two themes separately.

There are an awful lot of details considered here. In this doc I've tried to describe the reasoning behind the most important choices, as well as things I think are likely to be missed. I have left very obvious things to Figma. e.g. the width of lines on line charts. So, if there are questions about how a certain detail should be implemented, look here and also at the Figma files. If there is a conflict, please ask which is correct. If something is not defined, please also involve Ben and Martin in working out a design. If there is a configuration option that we support today that is not mentioned here, we almost certainly want to keep it.

Pro charts

Our north star for pro charts is "zero-config McKinsey". Who are McKinsey and why do their charts matter? McKinsey is a top management consulting firm. The main thing here is a certain aesthetic that communicates "trust me, I know what I'm doing". This isn't a sexy aesthetic but it is a trustable, professional one. Their charts tend to be clear and unambiguous. Below should give you an idea of the aesthetic.

To define the details of each of our chart types we looked at a number of charts from McKinsey, as well as from organizations like Goldman Sachs, NYTimes, etc. Those details are spec'd in the following sections. We also noticed that most charts from our research were monochromatic. We are including two monochromatic palettes in this update but we aren't making it the default. We believe for our customers' use-cases being able to easily reference a series by color in a meeting is important. This is hard if they are all different shades of purple.

Defaults

The defaults for each chart type are important to maximizing the likelihood that a new chart is "ready-to-go". These defaults are inspired by what we learned from our research. If a chart type is not mentioned below it should just inherit from the "all charts" bucket, if a chart type is mentioned it overrides the all charts default. The below list does not include all possible options but just ones which are either changes from today or important defaults to get right.

• All charts

  • X-axis line: on

  • Y-axis line: off

  • X-axis labels: on

  • Y-axis labels: on

  • X-axis tick marks: off

  • Y-axis tick marks: off

  • Vertical gridlines: off

  • Horizontal gridlines: on

  • Title: on

  • Title position: left

  • Legend: on

  • Legend position: top left

  • Data labels: off

• Line charts:

  • Point markers: off

    • This option is only available on line charts.

    • Note: this is currently called "Line markers" which doesn't really make sense, let's rename to "Point markers".

• Column charts:

  • Data labels: on

  • Data label position: inside

    • Has option of Inside/Outside, not available on all chart types

    • Stacked variants only have inside

  • Horizontal gridlines: off

• Bar charts

  • Data labels: on

  • Data label position: inside

    • Has option of Inside/Outside, not available on all chart types

    • Stacked variants only have inside

  • Horizontal gridlines: off

  • Y-axis line: on

  • X-axis line: off

• Pie chart

  • Legend: off

  • Data labels: on

  • Note: many of the all charts defaults don't apply here.

Palettes

We have four new palettes for pro charts. These palettes replace our old palettes. The four palettes are:

• Business: the default palette, uses a range of colors, has quite a specific vibe.

• Basic: a secondary multicolor palette, uses brighter more distinct colors than business.

• Purple: a monochromatic purple palette.

• Stone: a monochromatic off-grey palette.

An example of the new business palette:

We need to consider how we migrate to new palettes. People may feel uneasy about the colors of their charts changing. The first thing we need to work out is whether that's true or not. If it is, we can either rip the band aid off or migrate to new palettes by not changing any existing charts. In the latter case, existing charts would keep their palette but new charts wouldn't have the option.

For each palette in addition to the actual base colors, there is a label color per-base color. For each chart type there are also rules about from which direction colors are applied. For example, for combo charts, the columns should go forward through the colors for the columns and backwards for the lines. This maximizes the likelihood of a line being in a contrasting color to the columns.

Here are the definitions of each palette and its label colors:

Responsive sizes

Today we have fixed spacing and font sizes for charts regardless of their size. This means small charts tend to look not good, for example:

Our new charts have less padding overall and have a breakpoint below which padding, spacing and font sizes reduces further. The two sizes:

• Default: >= 400px width and height

• Small: < 400px width or height

And the sizings for each size:

The outer padding is shown in blue here, while the inner spacing is in orange and refers to the margin between chart elements:

Applying these changes, here is an example of a new "small" chart:

Axes

There are a few component parts here: lines and labels. Today there are a few problems with both of these. First, they are both drawn in a dark grey. We think the charts pop more when the lines and labels are drawn in pure black. Second, there are a number of problems with slanted x-axis labels. More details below.

Axes lines

The lines are always pure black. As in the defaults section above, the x-axis line is almost always on by default and the y-axis line is almost never on by default. Tick marks can optionally be turned on for each axis, when the line is turned on.

Axes labels

The labels are always pure black. Y-axis labels are always drawn in their normal orientation. X-axis labels have a few options. They can be horizontal (i.e. not rotated), slanted 45 degrees, or rotated 90 degrees ("vertical"). When labels are colliding we should default to 90 degree rotation. This avoids the case where the labels will be cut-off by the left edge of the chart. Gridlines should be centered on their respective labels.

Axes customization

An important piece of feedback from Imprint (customer) is that being able to customize the number increments on the axes is really important. They haven't tried Equals yet but find Sheets ability here too limited. It would be good to understand the flexibility that Excel offers and make sure our implementation can handle that. Even though we don't yet have designs for deeper customization.

Gridlines

Gridlines are drawn as solid light medium grey lines (#EDEDED). For line, area, and combo charts, horizontal gridlines should be on by default. For all other charts, all gridlines should be off by default. Horizontal gridlines should be centered with the y-axis labels when present. Vertical gridlines should be centered with the x-axis labels when present.

Data labels

Data labels refers to labels on the chart canvas for each point of data. This is the most problematic part of our current charts both in terms of implementation and also design.

First, the bugs. Today labels from one series are covered up by the next series' data. For example if you have two column series charted, with labels overflowing the columns, the next series columns will be drawn on top of the previous series labels. This is a long standing bug with Recharts and probably indicates that we'll need another solution for new charts. Then there are a number of Equals level bugs with coloring of labels, it's all over the place currently. Some times data labels have white backgrounds, sometimes colored.

Second, the design issues. They just often look bad. The pills for lines have too much padding – and they're on by default, often presenting as super cluttered. Then we try re-use these pills for columns and they don't look good there, often overflowing the width of the columns.

One thing we've realized after a lot of exploration is it is never possible to have something that works in every scenario. Which means we need more customization options for labels. It also means we need better defaults, not defaulting to have labels on when they're often not going to look good (see section above). And it means we should be ok with having different label types for different chart types.

Pills

For lines and area charts, we will use a pill. This pill can optionally (just not the default) be used for columns and bars. This pill design will be simpler than what we have today, with tighter padding, and will be drawn in the same color as the series. This pill will also be off by default for line and area charts. See here for an example:

The pill background color is always the same as the series. This means the pills don't look out of place with inside labels, described below. The text inside the pill should be in the "label" color defined in the palette (see above).

There are two ways to use the pill treatment for column labels. First, you can select "outside top" as the label position, which always becomes a pill. Second, for inside data labels, you can optionally have them drawn in a pill instead of just as text in the column. This means if your data is overflowing the width of the column you can put it in a container where it's always readable.

The pills will have the following customizations:

• Series position. For lines, you should be able to set the series position as "above", "center", or "below". When "centered", they are placed centered on the data point. For bars/columns, you should be able to set the series position as "outside top" (always a pill) or to "inside top/center/bottom" (with an option to explicitly choose to be a pill).

• Individual position. You should be able to move an individual pill on the chart canvas. i.e. I should be able to click any pill and drag it from its original position. There are designs for what the selected state of a pill looks like. This is the only way to ensure pills are always readable and don't have to be recreated in another tool.

• Border. You should be able to add a thin white stroke to the pill, called "Label border". This can be helpful for when there are a lot of data labels in close proximity.

• Data format. You should be able to change the format of the data shown in the label, without having to change the underlying formats. You should be able to shorten beyond what the format offers as well.

Inside

For column and bar charts, this is the default label type. Inside labels are drawn inside the plotted column or bar. For stacked column and bar charts, this is the only label type available. The default for column charts is "inside top" and for bar charts, "inside right". An example of a default column chart here:

Inside labels have the following customizations:

• Series position. On columns, inside labels can be "inside top" (default), "inside center", "inside bottom". On bars, they can be "inside right" (default), "inside center", and "inside left".

• Data format. You should be able to change the format of the data shown in the label, without having to change the underlying formats. You should be able to shorten beyond what the format offers as well.

Title and legend

We are updating the title to be slightly smaller, medium font weight, and default left aligned. We are also updating the legend to be left aligned by default. In our explorations left aligning the legend and title by default looked good most often. The alignment can be changed obviously. As defined above, the font sizes are responsive depending on the overall chart size. Titles can be positioned left/center/right.

Legends get a number of new placement options. They can now be placed top left, top center, top right, left, right, bottom left, bottom center, bottom right. Top and bottom positioned legends should wrap to the next line when they'd otherwise overflow. We are also introducing a new legend option/alternative: labeled lines. Labeled lines replace a legend with labels on the right hand side of a chart, beside the last point of the line. Labeled lines cannot be used when a second y-axis is in use. There are a number of detailed spacing and alignment details defined in Figma.

Typography

Pro charts use the default Equals font, Neue Haas Unica. The various font sizes are defined in the "Responsive sizes" section above.

Lines

Lines are drawn with a width of 2px. Optional point markers can be turned on, they are drawn more as "ticks" than the current circular dot style. If point markers are turned on and data labels are turned on with position set to "centered", the data labels should be drawn on top obscuring the point markers.

Stacked bars and columns

We are adding a new option to display a separator between segments of stacked bars or columns. This separator is a thin solid white line. This option will be off by default. We are also adding an option to show a "total" label above stacked bars and columns. This option will be off by default and is unavailable for 100% stacked variants.

Scatter chart

We are updating scatter chart points to be drawn as 4px diameter circles. We are adding an optional (off by default) thin white stroke that can be useful for when there are points in close proximity.

Modern charts

We are introducing a new high-level theme called Modern. This is in response to some users' feedback that they wish Equals charts were more like what they can create in tools like Graphy. Modern charts should feel fun, approachable, and playful. They have more rounded edges, lighter colors for labels and axes, and brighter color options. For details not defined here, they should inherit from the Pro definitions above. Here is an example of a modern chart:

Palettes

Modern charts get two of their own palettes, Bright (default) and Cool. They also have the option of the Purple or Stone palettes, available in Pro.

Axes

Axes labels and lines are drawn in a medium light grey (#737373). Lines are drawn as solid. These lines are lighter than the Pro axes lines which are black.

Gridlines

Gridlines are drawn as dashed lines in medium light grey (#737373). These are slightly darker than the Pro gridlines.

Data labels

Pills have slightly rounded corners and a tiny bit more padding than the Pro variant. Details in Figma. Inside labels work the same as in Pro.

Typography

Modern charts use Inter with font-feature-settings: "salt" enabled.

Title and legend

The only detail to note here is the slightly rounded corners on the legend color indicators. See Figma for details.

Bars and columns

Bars and columns have rounded corners. When bars or columns are stacked, only the exterior edges are rounded. The desired aesthetic is a rectangle with lightly rounded corners. Thus to avoid fully semi-circular ends at smaller widths, we'll need to have breakpoints where the radii get smaller as the width of the bar/column is reduced.

Lines and area

Lines and the top edge of areas are smoothed by default. I'm not exactly sure how to define this. We likely need to see what options we have in Recharts or whatever library we go with. The desired aesthetic is a slightly smoothed line without harsh angles as you transition from point to point. Turning off line smoothing should be possible.