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:

image

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!

Filed under: ,

Comments

# Building a Silverlight LOB Application

Saturday, February 19, 2011 8:26 PM by Deborah's Developer MindScape

This is the first in a series of posts that will build a Silverlight Line of Business (LOB) application

# re: Silverlight Charting: Displaying Data Above the Column

Tuesday, February 07, 2012 2:22 PM by Tyler

How would I display the entire value if it exceeds the size of the column?  I got what you have shown here working, but if I use values instead, they get cut off depending on the size of the column.

# re: Silverlight Charting: Displaying Data Above the Column

Tuesday, April 23, 2013 10:26 PM by sarah

Hi very helpful post.

however it is possible that the data above the column will disappear like what Tyler posted

Leave a Comment

(required) 
(required) 
(optional)
(required) 
If you can't read this number refresh your screen
Enter the numbers above: