Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

February 19, 2011

Silverlight Charting: Setting the Tooltip

Filed under: Silverlight @ 6:04 pm

By default, Silverlight charts display a tooltip when the user hovers over the chart but it is not very fancy. Here is an example:

image

So it says 97. Is that a count? Number of points? Percent?

This prior post sets the ground work for displaying a chart. This post covers how to modify the tooltip to display more meaningful information.

The key to modifying the tooltip is to set the DataPointStyle. Setting the DependentValueStringFormat property allows you to format the tooltip as desired.

<toolkit:ColumnSeries.DataPointStyle>
    <Style TargetType="toolkit:ColumnDataPoint">
        <Setter Property="DependentValueStringFormat"
                Value="{}{0:N0}%" />
        </Style>
</toolkit:ColumnSeries.DataPointStyle>

Some of the more common formatting strings:

  • {}{0:C}
    • Currency
  • {}{0:N1}%
    • Numeric value, formatted to 1 decimal place and with a % sign
  • {}{0:p2}
    • Percent value, formatted to 2 decimal places
  • {}{0:MM/yy}
    • Month and year (2/11)
  • {}{0:MM/dd}
    • Month and day (2/19)
  • {}{0:MMM}
    • Month short name (Feb)
  • {}Some other text
    • Any desired text

The problem with setting the DataProintStyle, however, is that you lose all of the automatic color selection for your chart. Your chart will turn orange as shown below.

image

So you then have to manually set your colors. Setting the colors for the chart is demonstrated in this prior post.

Combining the color and tooltip formatting is as follows:

    <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}%" />
            </Style>
    </toolkit:ColumnSeries.DataPointStyle>

The final result is shown below.

image

Use this technique any time you want to format your tooltips in a chart.

Enjoy!

4 Comments

  1.   Ramprasad — March 31, 2011 @ 4:42 am    Reply

    How to display a series name on the tooltip of the column series?

  2.   Torsten — August 13, 2011 @ 3:00 pm    Reply

    Hi Deborah,

    nice article, but one question arised I was not able to resolve by myself. In your sample you have 3 columnseries and use inline templating for each of them. I wanted to do “better” and defined a central style in the resources (called ColumnSeriesStyle and containing common property values like your tool-tip formatting) and linked the columnseries to the style by setting the DataPointStyle-attribute in the columnseries-element like this:

    DataPointStyle=”{StaticResource ColumnSeriesStyle}

    That works. But because the style only defines the common properties, I still need to assign the other properties like the background color to each columnseries.

    How do I do that? Defining an inline style is not allowed after already addressing another style. And setting the background as attribute in the ColumnSeriesStyle-element had no effect.

    Any idea? Thank you & keep on!

  3.   Jacki — September 19, 2011 @ 5:01 am    Reply

    Was totally stuck until I read this, now back up and rnuinng.

  4.   Narender — January 16, 2012 @ 6:24 am    Reply

    Dear sir,

    How could i change the width of column and animate the height of the column from 0 to value

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