Deborah's Developer MindScape

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

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.

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.

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

Enjoy!