Archive for September, 2013

Design options for bar charts and Top X bar charts

Here’s a couple of design options to improve bar charts, fix some pet peeves of mine, or simply change things up a little.

Those pet peeves are truncated labels and always putting the top record on the bottom. Fortunately, both of those can be fixed as seen below.

Top 5 Chart - Top item on on top - Full Labels, non-truncated. CRM Chart, CRM 2011

MS CRM top 5 bar chart with the top item on top and non-truncated labels.

I’ve also positioned the labels on the inside of the chart, which is a better utilization of space.

Top X Charts

If you make a Top 5 Bar Chart, you get this.

Top 5 Bar Chart - Standard, made in CRM Chart editor

Top 5 bar chart made in the CRM Chart editor.

It has always puzzled me that the “top” item is on the bottom.  Nobody want’s to see their name on the bottom of a list. My first idea was to change the order in the xml from descending=”true” to descending=”false”. While that will reverse the order of the Bar chart, it will also only return the bottom 5 records rather than the top 5. Good to know if you ever need to make a bottom x chart of something.

Turns out the xml modification is even easier. Add IsReversed=”True” to your AxisX properties and you now get a Top 5 Bar chart with the top record on top.

crm chart xml axis x isreversed="true", CRM 2011

CRM Top 5 Chart barchart with X axis reversed and top item on top.

The same top 5 chart with the X axis reversed and top item on top.

Truncation of Axis Labels

Label truncation is particularly annoying when users name all their records something like “Campaign for xyz” or “Opportunity for xyz”. All you see on the labels are the “Campaign for…”. Somehow the “…” always contains the most important part.

To fix that, plus a few other modifications, I’m going to:

  • Add the axis label to the bar series, to get the label on the inside of the chart
  • Left align the axis label via Custom Properties
  • Make the bar color semi-transparent so it’s easier to read the labels
  • Increase the text size a little
  • Remove current truncated labels by disabling the X axis
  • Use a StackedBar chart type

xml axis labels inside

Top 5 BarChart CRM 2011 reversed - labels on inside across the bars

There are 4 spaces in front of the #AXISLABEL. That is to control the positioning and ensure the label doesn’t start before the bar does.

Font is increased from 9.5px to 11px.

ARGB colors was used  to add transparency. In this case a little over 50% transparency.

Custom property BarLabelStyle=Left is added to make sure the labels are aligned along the X axis.

StackedBar is used instead of a Bar chart, because that, in conjunction with BarLabelStyle=”Left”, forces all the labels to start along the axis. On a Bar chart the label may move right, till the end of a short bar. Even when it’s left positioned.

On AxisX; IsReversed=”True” to get the top item on top, and Enabled=”false” to remove the original truncated labels.

Hope you liked it. Please sign up for new posts or follow me on Twitter 

, , , , ,

11 Comments