This is a showcase review for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.
View all Dundas articles
Introduction
We love programming and we love cool features that make you go 'oooh!'. One extremely powerful, and extremely cool feature we've built into Dundas Chart for .NET is SmartLabels. These allow for less cluttered displays of data points to provide the chart the look you need.
What can SmartLabels Technology do for me?
SmartLabels uses a rule-based technology to get collision free data point labels. Label collisions can occur when there are many points on a chart or when there are points of similar values. How to handle this is one of the most difficult tasks that any chart can face and it usually fails to meet the human expectation of the chart appearance. In the end, most chart developers will position the labels manually which may reduce the collisions but will fail in unknown data conditions. This where Dundas Chart for .NET excels.
Dundas Chart for .NET SmartLabels is able to prevent data point label collisions for most chart types and combinations of chart types. Figure 1 shows a simple Line-Column chart where each data point displays a value label. This case shows a very simple case and is not uncommon to everyday charting. There are not a large number of points, however, they are similar in value. Notice that there are several point labels overlapping and two extending outside of the charting area. The trend is obvious to the eye and the Y axis labels help understand the data but the overlapping makes the chart very difficult to read.
Figure 1: Chart without SmartLabels
By enabling each series with SmartLabels technology, a messy, unreadable chart can quickly become a one that allows you to visualize your data.
foreach(Series series in Chart1.Series)
series.SmartLabels.Enabled = true;
Figure 2: Chart with SmartLabels
With SmartLabels there is no complex algorithm for you to write and you don't need to know anything about the data ranges beforehand. SmartLabels just works with little a very limited time investment to produce clean and readable charts.
How to use SmartLabels
When using SmartLabels you have control over the appearance styling. There are also two categories of SmartLabels rules: label movement rules and positioning rules. Let's take a closer look are the properties each category provides.
Appearance Styles
When a data point label is moved away far enough away from a data point a Callout Line may be shown to the point. The property, LabelCalloutStyle
, determines how a Callout Line is terminated at the label end of the line. The possible styles for termination end are a Box
, an Underline
or None
(no added styles). Setting the style is simply one line of code.
Figure 3: Available Callout Styles
Chart1.Series["Series1"].SmartLabels.CalloutStyle = LabelCalloutStyle.Box;
There are other style properties that provide control to the appearance of the Callout Line as well as the inside color of the box (when the
LabelCalloutStyle
is of a
Box
type).
Chart1.Series["Series1"].SmartLabels.SmartLabelEndCap = LabelEndCap.Arrow;
Chart1.Series["Series1"].SmartLabels.CalloutBackColor = Color.Khaki;
Chart1.Series["Series1"].SmartLabels.CalloutLineColor = Color.Black;
Chart1.Series["Series1"].SmartLabels.CalloutLineStyle = ChartDashStyle.Solid;
Chart1.Series["Series1"].SmartLabels.CalloutLineWidth = 1;
Movement Rules
The Movement rules are the real guts of Dundas Chart for .NET SmartLabels. They are simple to understand and set the stage for the readable charts. For example, if a label has been determined that it must be moved, the SmartLabel movement rules permit you to specify the moving distances, the allowable moving directions and if the label is able to exist outside of the plotting area. These are controlled through the use of several moving related properties. The default movement rules will normally resolve most issues, however, as usual, Dundas Chart for .NET provides developers significant customization tools and SmartLabels are not an exception.
The allowable data point label movement direction is set using the MovingDirections
property. This property can be set to a single direction or as a bitwise OR combination to give you complete control of the movement direction. The distance of movement can also be controlled using the MinMovingDistance
or MaxMovingDistance
properties. These are pixel properties that define a value that specifies the minimum or maximum distance from the data point that data point labels are allowed to be moved. When a data point label needs to be repositioned, the label will be moved by the range of pixels specified.
Figure 4: Moving Distance and Direction Behavior
Chart1.Series["Series1"].SmartLabels.MinMovingDistance = 20;
Chart1.Series["Series1"].SmartLabels.MaxMovingDistance = 30;
Chart1.Series["Series1"].SmartLabels.MovingDirection = LabelAlignment.Bottom |
LabelAlignment.BottomRight;
An additional property, the AllowOutsidePlotArea
property, sets a value that specifies the extent of how far outside of the plotting area the labels may go. The default value allows labels to extend partially outside (up to 50%) but can also be set to allow full label drawing outside or not at all. When applying SmartLabels, the drawing outside of labels is only used to provide an additional option to the chart; the chart will only draw outside if the labels cannot be drawn elsewhere without overlapping.
Figure 5: AllowOutdsidePlotArea Behavior
Chart1.Series["Series1"].SmartLabels.AllowOutsidePlotArea
= LabelOutsidePlotAreaStyle.Partial;
Positioning Rules
Overlapping labels is an obvious condition for when to reposition a label but there are other conditions, such as labels overlapping markers and a rule to hide labels that cannot be repositioned without overlapping elsewhere (without violating the user-defined rules). In the first frame of Figure 6, the markers are permitted to overlap the data point marker. In the second frame, they are not allowed to overlap and based on the movement rules that were defined for this example, the point label could be placed anywhere else. The result was that the data point label was not drawn at all.
Figure 6: MarkersOverlapping Behavior
Chart1.Series["Series1"].SmartLabels.MarkersOverlapping = true;
Chart1.Series["Series1"].SmartLabels.HideOverlapped = true;
With the API provided and the flexibility of the Dundas Chart for .NET rule-based labeling, unreadable charts need never be shown again!
For an interactive demonstration of Dundas Chart for .NET SmartLabels, download a full evaluation copy of Dundas Chart for .NET Enterprise Edition and experiment with our extensive sample set or visit the Dundas Chart Gallery on our website.