Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

February 19, 2011

Silverlight Charting: Displaying Data Above the Column

Filed under: Silverlight @ 8:24 pm

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!

2 Comments

  1.   Tyler — February 7, 2012 @ 2:22 pm    Reply

    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.

  2.   sarah — April 23, 2013 @ 10:26 pm    Reply

    Hi very helpful post.
    however it is possible that the data above the column will disappear like what Tyler posted

RSS feed for comments on this post. TrackBack URI

Leave a comment

*

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs