Better Dashboards

Working with Microsoft enterprise chart, dashboard and reporting technologies.

Posts Tagged ‘Axis Labels’

Show All Skipped Labels on the X-Axis

Posted by milang on January 11, 2009

Just about everyone who has worked with category names on the Microsoft Reporting Services or .NET chart has encountered this problem: you databind categorical values from a database, but when it is displayed on the chart, it skips labels on the x-axis, like below:


How Do I Show All Labels on the X-Axis?

The short answer is, set the Interval property on the x-axis to 1:

// Show all labels on the x-axis
Chart1.ChartAreas[0].AxisX.Interval = 1;

Issues Created by Solving the X-Axis Label Issue

Showing every x-axis label produces the intended effect of matching every name to a data point, but it also causes clutter if there are too many points or the names are too long.  For example, look at what happens when I databind first and last names of each sales person:


It gets worse if I show all sales people instead of the top 10:


One satisfactory solution is to change the chart type to Bar:


This is a cleaner version of the previous chart, with the category labels more intuitively placed on the chart.  If you’re going to use this solution, make sure you change the appropriate properties for the axes, since the x-axis and y-axis are reversed on a bar chart.

The x-axis skipping label issue tends to be a catch-22 for developers.  It usually does not make sense to show every individual date along a financial chart if you are trying to graph a six-month trend of a particular stock price; in this case, you actually want the chart to skip labels.  On the other hand, if you are showing sales performance by salesperson on a chart, there is no way you want any of those people skipped to simplify the trend of the chart.

For more information on implications of skipping axis labels, see:

Also, if you are using the SSRS chart, you might want to consider implementing the really cool TableInlineCharts solution from Robert Brucker’s whitepaper:


Posted in .NET Chart, SQL Reporting Services | Tagged: , | 20 Comments »

Starting Y-Axis Labels at a Minimum Value instead of at Zero

Posted by milang on January 10, 2009

Here is a fairly common scenario:  When I was building a stock chart, all of the values for the stock fell between $29 and $34 (I must have been graphing Microsoft’s stock :-)).  By default, the chart calculates labels along the Y-axis based on an algorithm that determines what the highest value in the dataset is, and then sets labels in fixed quantities from 0 to that number.

Unfortunately, when your minimum value is 29, the resulting graph has more white than a Toronto snowstorm:


To solve this issue, some users will hardcode the Y-axis minimum value to the number that they want (in this case, 29).  That works, but there is actually a more elegant solution that is built into the chart: the IsStartedFromZero property on the y-axis changes the labeling algorithm so that the chart recalculates values for the Y-axis labels based on the minimum value in your dataset and the maximum value in your dataset.  The resulting chart is dramatically different:


You can find the property in the property window under ChartAreas –> Axis Collection –> Y-Axis –> IsStartedFromZero or through code:

// Start Y-axis labeling from the minimum value in my dataset
this.Chart2.ChartAreas[0].AxisY.IsStartedFromZero = false;

(Ridiculously obscure sidebar: If you are using a stock chart which uses 4 Y values, and one of those Y values is zero, the IsStartedFromZero property does not work.  So for example, if my first data point in the chart was (X: 0, Y: 32,33,0,0) the chart would not have recalculated axis labels.  As far as I know, this is a bug in the chart.  :-))

Posted in .NET Chart | Tagged: | 4 Comments »

Effectively Using the Secondary Y-Axis

Posted by milang on January 7, 2009

One of the most popular charting trends over the last several years has been the increased importance of the secondary axis on a chart.  When it is done correctly, adding a second series to the same chart area makes for a more colorful, richer and compressed visualization. However, when it is done poorly, it hurts readability, reduces effectiveness and causes endless grief for information purists. Here is an idea about how to maximize the usefulness of the secondary axis.

Basics of Secondary Axis

Once you have created a series on the chart, assign the series to the secondary axis:

// Assign the first series in the Series collection to the secondary axis
Chart1.Series[0].YAxisType = AxisType.Secondary;

If you are using the chart sample framework, the Secondary Axis sample is in a folder under ChartFeatures –> Axis –> PrimaryAndSecondaryAxes

Why Information Purists Hate the Secondary Axis

Most charts that use the secondary axis only complicate the meaning of the data by obscuring what is trying to be shown. Here is a chart that makes use of the secondary axis:


Based on the image alone, it is impossible to tell which series belongs to which axis.  We have to add individual point labels to each data point in order to figure out how the data points relate to the axis. This causes more noise on the chart and undermines the effectiveness of the chart to simplify the data, like this:


Sidebar: as a general rule, if you have to add data point labels to every point so that the chart makes sense, you’re better off skipping the whole concept of using a chart and just put the data in a table.

The optimal solution is to separate the data into two separate chart areas but that isn’t particularly fun because now your visualization does not have the same kind of impact as it did when the axes were minimized and the color was maximized.

How to Improve Visualizations using the Secondary Axis

If you absolutely need to use the secondary axis to conserve space or to maximize visual aesthetics, one way to improve the visualization is to color the axes with the same color as your series:


Using this technique, there is a very clear association between the series color and the axis it belongs to.  The key is this: instead of manually setting colors for the series, you can use the existing colors in the default palette to color the axis as long as you call the ApplyPaletteColors method in order to populate the data.  Here is the code I used:

// The palette is automatically applied on the chart, so by default,
// you do not have access to the series colors.  Calling this method
// will give you programmatic access to the series colors in the chart.

// Color the primary axis (AxisY) with the colors of the first series
Chart1.ChartAreas[0].AxisY.LineColor = this.Chart1.Series[0].Color;
Chart1.ChartAreas[0].AxisY.LabelStyle.ForeColor = this.Chart1.Series[0].Color;

// Color the primary axis (AxisY2) with the colors of the second series
Chart1.ChartAreas[0].AxisY2.LineColor = this.Chart1.Series[1].Color;
Chart1.ChartAreas[0].AxisY2.LabelStyle.ForeColor = this.Chart1.Series[1].Color;

What if I have more than two series on my chart?

The secondary axis works well if you have exactly two series on a chart.  If you have more than two series on the chart, you are risking more clutter and you’re better off just using separate chart areas.  In theory, if you had multiple axes (like the sub-axes feature introduced in Dundas Chart 6.0) you could repeat this technique endlessly, but the sub-axis feature did not make it into this version of the Microsoft chart control.

Good luck!

Posted in .NET Chart | Tagged: , , , | 1 Comment »