Customizing tooltip

This post shows how to customize the tooltip in silverlight toolkit charts

we need to add references to Microsoft.Windows.Controls.DataVisualization as well as Microsoft.Windows.Controls.DataVisualization dll’s

Grab the Template from the toolkit source
the only change I made was to replace the Tooltip content

original

<ToolTipService.ToolTip>
 <StackPanel>
  <ContentControl Content=”{TemplateBinding FormattedDependentValue}” />
  <ContentControl Content=”{TemplateBinding FormattedRatio}” />
 </StackPanel>
</ToolTipService.ToolTip>

chart_std_tooltip

modified

<ToolTipService.ToolTip>
 <StackPanel Orientation=”Horizontal”>
  <ContentControl Content=”{TemplateBinding IndependentValue }” />
                <TextBlock Text=” – “></TextBlock>
                <ContentControl Content=”{TemplateBinding FormattedDependentValue}” />
                <TextBlock Text=” – “></TextBlock>
                <ContentControl Content=”{TemplateBinding FormattedRatio}” />
 </StackPanel>
</ToolTipService.ToolTip>

chart_custom_tooltip

The chart itself  is declared along with the style as following

<charting:Chart x:Name=”chart1″ >
            <charting:Chart.StylePalette>
                <datavis:StylePalette>
                    <Style TargetType=”charting:PieDataPoint”>                       
                        <Setter Property=”Background”
                                Value=”blue” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                    <Style TargetType=”charting:PieDataPoint”>
                        <Setter Property=”Background”
                                Value=”red” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                    <Style TargetType=”charting:PieDataPoint”>
                        <Setter Property=”Background”
                                Value=”green” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                    <Style TargetType=”charting:PieDataPoint”>
                        <Setter Property=”Background”
                                Value=”yellow” />
                        <Setter Property=”Template”
                                Value=”{StaticResource PieDataPointTemplate}” />
                    </Style>
                </datavis:StylePalette>
            </charting:Chart.StylePalette>
            <charting:Chart.Series>
                <charting:PieSeries  IndependentValueBinding=”{Binding Key}”
                                    DependentValueBinding=”{Binding Path=Value}”>                   
                </charting:PieSeries>
            </charting:Chart.Series>
        </charting:Chart>

you can download the source here

2 thoughts on “Customizing tooltip

Leave a comment