“Mind the gap” to make your CRM charts look better

In the supercar and racing industries, the key question for all major design decisions is “does it make the car go faster?” This can be interpreted fairly loosely, for example better brakes or gripper tyres make it possible to drive the car faster without compromising safety. And beyond that, there is still room for creativity and the aesthetics of beautiful design, but in the end, the question still reveals a single-minded focus that we can learn from in other disciplines too.

When designing charts, I aim for functionality first and foremost. I want the end result help people to understand their data better, see patterns and trends, identify outliers and gain insights that support better decisions. But as with the design of a desirable sports car, we can still spend some time on making data visualisations pleasing to look at, and make the best use of the space we have available on a range of devices from small tablets to widescreen monitors.

Charts shrink and stretch depending on the space available

When you view a dashboard, charts are always the same height, regardless of the size of the window, whereas the width will reduce proportionally as the window width decreases. Using CRM 2013 or 2015, dashboards use a responsive design, so the layout will change and components will be pushed down so they don’t just become ridiculously narrow. The only time the height of a chart will be reduced significantly is when you use a view combined with the chart pane above it, with CRM in a window that is already not very high.

For the purposes of this article, I am going to focus on column charts, because they will more often be displayed at a variable width. This means that your design should take account of what they will look like in very narrow windows, but also how they might appear when stretched very wide or viewed on their own. Everything discussed applies in exactly the same way to row charts, but is less likely to be an issue in reality.

Manage column widths versus white space

There are two key properties for a series in a column chart that manage the column widths and white space: PointWidth and MaxPixelPointWidth. These are both contained within the CustomProperties, which is a comma-separated set of properties, as seen in this XML snippet from a simple chart built in CRM and exported:

<Series ChartType="Column" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40"...>

These same properties can be used with Column, StackedColumn, StackedColumn100, and the equivalent row chart types.

PointWidth

if you have ever played around with changing these properties, you may have found that they don’t always seem to do very much, so let’s figure out what they are each supposed to do and how they relate to one another.

Let’s take a look at PointWidth first. This is a decimal value from 0 to 1, and simply represents how much of the chart is taken up by the columns, relative to the white space. A setting of 0.75 means that the columns should take up 75% of the space, So when your charts are relatively narrow, the columns and gaps are both resized so that if you measure from the left side of one category column to the left side of the next category, the columns take up 75% of that width.To put it another way, taking the inverse of the PointWidth, the gaps will take up 25% of the available space. Whether you have a single column, or multiple clustered columns in each category, the gaps will be 25% of the chart width, and the columns together will take up 75%.

The example below shows two charts of the same two series of data, one using stacked columns, one using normal (clustered) columns. In both cases the PointWidth is set to 0.5 for both series. You can see the gaps are 50% of the available space in both charts, so the PointWidth is the value for all series together, not each one.

Personally, I prefer to make the columns a bit wider than the OOB setting; I find around 0.85 works well for single or stacked columns, and 0.8 for multi-column charts. You should be wary of using a value of 1 for PointWidth

If there is more space available, charts expand to use it, so in reality if your chart has plenty of room, the columns will be spread out and the gaps between them will be considerably more than the 25% you might expect. So you should take the PointWidth, figure out the inverse of it, and think of this as a the minimum space for the gaps, remembering that it can be larger.

Comparing PointWidth to Excel’s Gap Width

Excel handles the relative widths of columns and gaps quite differently. For a series in an Excel chart you can specify the gap width from 0 to 500%. This is a measure of the width of the gaps relative to the width of a column. By default this is set to 150%. If you plot only a single column or stacked column, this is definitely excessive in my view. However, if you have two or more “clustered” columns, higher values for this setting start to make a bit more sense because it measures the size of the gap relative to one of the columns, not the group. So for a single column a setting of 20-30% could be fine, but if you have four clustered series for example then 70-100% might be more suitable, as this is equivalent to 15-20% gaps overall.

In the example below, a gap width of 100% means that the gap is the same width as one of the clustered columns.

Also notice that Excel always scales both the columns and the gaps to retain the selected proportions all the time, regardless of the size of the chart. So in Excel the gap width is always used, rather than being a minimum as it is in CRM.

MaxPixelPointWidth

This setting is in contrast to PointWidth, and is used to manage the opposite problem – when a chart is stretched out sideways, you might not want to have columns that are are too wide. As a general rule, if the column widths exceed the heights, the sheer amount of “ink” visible can make it much harder to focus on subtle differences in height. Conversely, if the gaps between columns are too wide, it can be difficult to compare column heights to one another accurately.

If you have a column chart with only a few categories that is likely to be displayed fairly wide, such as half the width of a dashboard on a widescreen monitor, you should test this with some different values for this property. I find that the default 40 pixels is a bit narrow most of the time, so I generally go for about 80 to 100 pixels here. Don’t forget, this does not mean your columns will normally be this wide, this is setting a maximum that you will only ever see if the chart is displayed very wide, or has very few categories. If the columns reach the maximum width, the chart is plotted with increasingly large gaps to make up the space.

As an example, if you are looking at a chart of “My Cases resolved per month”, this might look fine most if the time, combined with a view of Cases resolved in the last 12 months. But someone who just joined the organisation would only have one month showing up, so the columns would be much wider than usual and this maximum width can prevent the chart looking awful. This scenario would of course be avoided if you instead plot all the data for everyone in the business (so there are always records for every month), and highlight the current user’s contribution by filtering the chart to produce a “conditional formatting” effect.

In the final example of this article, exactly the same stacked chart shown above is displayed across the full screen. Notice that the PointWidth of 0.5 is now ignored, and instead the MaxPointWidth of 100 pixels is being used to limit how wide the columns appear (click for full size version).

Now that you know how these two properties control the display of your charts, you can start to use these to make your charts look a bit more polished and professional, and possibly more attractive and “easy on the eye”, no matter what size they are displayed at.