Tip:
Highlight text to annotate it
X
In this video I demonstrate how to add data labels and tooltips to the C1Chart control
for WPF, Silverlight, Windows Phone and WinRT XAML.
The best way to create a label or tooltip is to create a DataTemplate that defines your
label, and assign it to either the PointLabelTemplate or the PointTooltipTemplate properties on
the DataSeries object. Then, you bind the UI elements within your template to various
properties from the plot element’s data point.
Now, let me show you how to set this up in XAML.
Here I have a smooth lines and symbols chart with some XYDataSeries already populated.
First I will create a DataTemplate that defines how my label will appear. We can define data
templates in several places and reference them throughout our application. Since I only
plan to use this within C1Chart I’ll define it within the control’s resources.
DataTemplates are a nice feature of XAML because they allow us a lot of flexibility and reusability.
We could easily create round labels, or arrow shaped labels, or transparent yellow boxes
with rounded corners…any style we imagine is possible.
Keep in mind we could put any UI elements here in our template, but for this simple
exercise I’m just defining a single TextBlock. Once this is all configured, the data context
of this template becomes the DataPoint object that C1Chart uses to represent each point.
If you open up the Object Browser and look for the DataPoint class under the C1Chart
namespace, you can discover all the available properties on this object that you can bind
to and visualize in your labels. The DataObject property gives us access to
the custom object bound to this point, if we were using one. We can get the Series information,
point index, as well as some statistical information calculated by the C1Chart control.
For demonstration I’ll use the Value property which displays the Y value of the point. Later
in this video I’ll show how to display PercentageSeries. In my DataTemplate here I bind the TextBlock’s
Text property to Value. Then, most importantly, set the PointLabelTemplate
property on the data series to this static resource.
Notice now, even in design time, that you see the value label appear above each data
point. Sometimes you may not see changes until you rebuild or run your application.
You can further customize the position of our label with some attached properties in
the C1Chart namespace. The attached PlotElement.LabelAlignment property lets you choose what position to
align the label, such as Top, Left, Bottom, Right, centered and so on.
For instance, I will position my labels to the Top-Right.
If you’d like to further adjust the position you can set the attached LabelOffset property.
This property works like a point, the first value is horizontal offset, second is vertical
offset. For instance, I will move the label further
up by setting the vertical offset to -20. You can even add a connecting line by setting
the attached PlotElement.LabelLine property to an instance of a Line element.
I’ll customize the appearance of the line here in XAML.
This allows us to create static labels, but what if you want tooltips? To make a tooltip,
define your tooltips appearance in a DataTemplate, just as I demonstrated, and simply set the
PointTooltipTemplate property on the data series rather than the PointLabelTemplate.
Tooltips are less obtrusive and may be preferred for you UI.
There are a couple special tips for displaying labels on pie charts with the techniques I’ve
demonstrated so far. First, when working with Pie charts it’s
best to keep the LabelAlignment property set to Auto, which is the default value.
Second, the LabelOffset property works a bit differently for pie charts. Rather than supplying
horizontal and vertical offset, you supply the offset from the center of the pie. So
a value of 20 moves the label 20 pixels further outward from the center. A value like -30
moves the label inside the pie, which is a common labeling technique.
Finally, in this video let me demonstrate how to show a percentage label. If you recall,
the c1Chart control exposes a PercentageSeries property on the DataPoint which you can bind
to in your label templates. This is a pre-calculated value so most of the work is already done
for you. Displaying a percentage is most commonly found
in pie charts, but it works just the same for all chart types.
For each data point, the percentage series will show you the percent of the whole series
it represents. Let me apply a quick format to this string
to show fewer decimal places by setting the StringFormat property…
This is just a nice little analytical feature that’s built into the C1Chart control.
That’s all for this video on data labels and tooltips. In the next video I will demonstrate
how to customize the axes. Stay tuned for more future videos like this one at our.componentone.com.