Silverlight Charting: Displaying Data Above the Column
Posted
Sat, Feb 19 2011 18:24
by
Deborah Kurata
When displaying a column chart, you may want to display the column value above the column in the chart. Something like this:
This prior post sets the ground work for displaying a chart. This post covers how to modify the chart to display text above each column.
Like most other changes to the chart columns, the key is the DataPointStyle. This time, however, you need to change the Template property.
<toolkit:ColumnSeries DependentValuePath="Project1Score"
IndependentValuePath="StudentName"
ItemsSource="{Binding StudentList}"
Title="{Binding TitleList[0]}">
<toolkit:ColumnSeries.DataPointStyle>
<Style TargetType="toolkit:ColumnDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="-0.1,-0.1"
Center="0.075,0.015"
RadiusX="1.05"
RadiusY="0.9">
<GradientStop Color="#FFFDE79C" />
<GradientStop Color="#FFF6BC0C"
Offset="1" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="DependentValueStringFormat"
Value="{}{0:N0}%" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="toolkit:ColumnDataPoint">
<Grid Background=
"{TemplateBinding Background}">
<TextBlock Text=
"{TemplateBinding FormattedDependentValue}"
FontWeight="Bold"
Margin="0,-15,0,0"
HorizontalAlignment="Stretch"
TextAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:ColumnSeries.DataPointStyle>
</toolkit:ColumnSeries>
The most important change is the Margin on the TextBlock. Setting the top margin to a value of –15 will display the text above the column in the chart.
Enjoy!