Freigeben über

MS Chart Layout Helper

  • Artikel

MS Chart consists of different elements (like titles, legends, chart areas, …) which all share the same space in the chart. It is easy to make a ‘perfect’ layout of these elements when you know exactly how many you will have and what size they going to be. It can be challenging when the content of these elements is dynamic and their size may change significantly. Today we will discuss how we can improve different aspects of the Chart elements layout.

Examples

First of all, let’s start by looking at several different charts before (left) and after (right) we applied our layout improvement rules.

Example 1: Legend position was changed from Bottom to Right and its’ width was truncated.

image_thumb_1[1]

Sample 2: Title font was reduced and legend position switched from Bottom to Right.

image_thumb_2[1]

Sample 3: Vertical axis labels were limited to 30% of the chart width.

image_thumb[1]

Sample 4: Bottom axis long labels are truncated and vertical axis labels are shown in thousands.

image_thumb_3[1]

Sample 5: Labels are shown only for the largest 7 slices in the Pie.

image_thumb_4[1]

Legend

The most common issue with the Legend, is that it can take significant amount of chart space and can make the actual chart data difficult to read. Here are things that can improve legend layout:

  • Legend is docked depending on the proportions of the chart so that it takes advantage of the available space. For example, if we have a wide chart, it is better to dock legend on the Right than on the Bottom of the chart.
  • Limit space available to the legend to 30% of the total chart space. Legend will be trimmed if its’ content exceeds 30% of the chart size.
  • Hide legend when chart becomes too small.

Title

If chart title content depends on the dynamic data, its’ size can grow unpredictably and interfere with the data we are trying to shown in the chart. This is very similar with the Legend issues described above.

  • Limit space available to the title to 20% of the total chart space. If title exceeds 20%, we will try to reduce its’ font size and then truncate the content.
  • Hide title when chart becomes too small.

Axis Labels

A single very long label can make chart very hard to read.

  • Limit maximum size available to the axis labels to 30% of the chart size. If labels can not fit their content will be automatically truncated.
  • Use multipliers for showing values in thousands, millions, billions,… Instead of showing a very long axis label like this ‘50,000,000.00’, you can display ‘50’ and add ‘(in millions)’ to the axis title.

Pie Labels

Pie chart type is not the best visualization if you need to display many (>10) data points. It is hard to read and if you enable data point labels, there is a high chance that they will start overlapping. If you have to us the Pie chart it makes sense to show labels only for the largest slices in the pie.

  • Only display labels for the largest 7 slices in the Pie or Doughnut chart.

How to use?

All these rules are implemented and can be automatically applied using ChartLayoutUtilities add-on. Attached project contains ChartLayoutUtilities class and a sample Web Form. Just create an instance of this call passing reference to the chart control!

 Alex.

ChartsWithLongLabels.zip

Comments

  • Anonymous
    May 03, 2010
    Awesome sample. This is just what I needed! Thanks!
  • Anonymous
    September 08, 2010
    The comment has been removed
  • Anonymous
    September 15, 2010
    This doesn't tell me how to do any of this or where to find the ChartLayoutUtilities add-on. It was no help whatsoever.
  • Anonymous
    September 16, 2010
    Add-on source can be found as an attachment to this post...
  • Anonymous
    March 12, 2011
    hai.....................thanks hah............