Archive for September, 2013
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.
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.
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.
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
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 Follow @crmchartguy