Datapoint tooltip for silverlight chart toolkit

Customized tooltip to Chart datapoints :

Breaking Changes in Silverlight Toolkit October 2009
Renamed Charting’s StylePalette to Palette (for clarity) AND changed its type to IEnumerable<ResourceDictionary> (from IEnumerable<Style>) for a significant flexibility boost. Performed related renamings (many internal/private): IStyleDispenser->IResourceDictionaryDispenser, StylePalette->ResourceDictionaryCollection, StyleDispensedEventArgs->ResourceDictionaryDispensedEventArgs, StyleDispenser->ResourceDictionaryDispenser, StyleEnumerator->ResourceDictionaryEnumerator.

Most notably, this change makes it possible to associate MULTIPLE things with a palette entry and enables designers to easily and flexibly customize things like the LineSeries PolyLineStyle in the Palette. Additionally it enables the use of DynamicResource (currently only supported by the WPF platform) to let users customize their DataPointStyle without inadvertently losing the default/custom Palette colors. (Note: A very popular request!) Thanks to merged ResourceDictionaries, this also enables the addition of arbitrary resources at the Palette level (like Brushes) which can then be referenced by DataPoints, etc..

So instead of using StylePalette we need to use Chat.Palette .The following code will add more business oriented tooltip to LineSeries DataPoint.
Inside your chart tag in xaml file add following palette (for multiple line series styling). Note that palette uses template “CustomLineDataPointTemplate” which you need to define in Styles.xaml

<chartingToolkit:Chart x:Name="OrdersChart" ..="" other="" properties="" here="" >
  <chartingToolkit:Chart.Palette>
    <datavis:ResourceDictionaryCollection>
      <ResourceDictionary >
        <!--Blue-->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFB9D6F7"/>
                <GradientStop Color="#FF284B70" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!--Red-->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFFBB7B5"/>
                <GradientStop Color="#FF702828" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!-- Light Green -->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFB8C0AC"/>
                <GradientStop Color="#FF5F7143" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!-- Yellow -->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFFDE79C"/>
                <GradientStop Color="#FFF6BC0C" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!-- Indigo -->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFA9A3BD"/>
                <GradientStop Color="#FF382C6C" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!-- Magenta -->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819
"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFB1A1B1"/>
                <GradientStop Color="#FF50224F" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!-- Dark Green -->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FF9DC2B3"/>
                <GradientStop Color="#FF1D7554" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!--Gray Shade-->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFB5B5B5"/>
                <GradientStop Color="#FF4C4C4C" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!--Blue-->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FF98C1DC"/>
                <GradientStop Color="#FF0271AE" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!-- Brown -->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFC1C0AE"/>
                <GradientStop Color="#FF706E41" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!--Cyan-->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFADBDC0"/>
                <GradientStop Color="#FF446A73" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!-- Special Blue -->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FF2F8CE2"/>
                <GradientStop Color="#FF0C3E69" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!--Gray Shade 2-->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFDCDCDC"/>
                <GradientStop Color="#FF757575" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointT
emplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!--Gray Shade 3-->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFF4F4F4"/>
                <GradientStop Color="#FFB7B7B7" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
      <ResourceDictionary>
        <!--Gray Shade 4-->
        <Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
          <Setter Property="Background">
            <Setter.Value>
              <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
                    <TranslateTransform X="-0.425" Y="-0.486"/>
                  </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFF4F4F4"/>
                <GradientStop Color="#FFA3A3A3" Offset="1"/>
              </RadialGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
      </ResourceDictionary>
    </datavis:ResourceDictionaryCollection>
  </chartingToolkit:Chart.Palette>
  Inside your Styles.xaml add following xaml

  <!-- Chart Data point style for tool tip-->

  <ControlTemplate x:Key="ToolTipTemplate">
    <Border BorderBrush="Gray" BorderThickness="0.5" CornerRadius="5" Background="White" >
      <Grid>
        <ContentPresenter
        Content="{TemplateBinding Content}"
        ContentTemplate="{TemplateBinding ContentTemplate}"
        Margin="{TemplateBinding Padding}"
        VerticalAlignment="Center"/>
      </Grid>
    </Border>
  </ControlTemplate>

  <ControlTemplate x:Key="CustomLineDataPointTemplate" TargetType="chartingToolkit:LineDataPoint">
    <Grid x:Name="Root" Opacity="0" Background="Transparent" >
      <ToolTipService.ToolTip>
        <ToolTip Margin="4" Template="{StaticResource ToolTipTemplate}" Content="{Binding DataPointTooltipText}" />
      </ToolTipService.ToolTip>
      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
          <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:0.1"/>
          </VisualStateGroup.Transitions>
          <VisualState x:Name="Normal"/>
          <VisualState x:Name="MouseOver">
            <Storyboard>
              <ColorAnimationUsingKeyFrames BeginTime="00" Duration="00.0010000"
              Storyboard.TargetName="MouseOverHighlight"
              Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00" Value="#FFFFDF00"/>
              </ColorAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames BeginTime="00" Duration="00.0010000"
              Storyboard.TargetName="MouseOverHighlight"
              Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00" Value="0.24"/>
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
        </VisualStateGroup>
        <VisualStateGroup x:Name="SelectionStates">
          <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:0.1"/>
          </VisualStateGroup.Transitions>
          <VisualState x:Name="Unselected"/>
          <VisualState x:Name="Selected">
            <Storyboard>
              <DoubleAnimationUsingKeyFrames BeginTime="00" Duration="00.0010000"
              Storyboard.TargetName="SelectionHighlight"
              Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00" Value="0.18"/>
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </VisualState>
        </VisualStateGroup>
        <VisualStateGroup x:Name="RevealStates">
          <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:0.5"/>
          </VisualStateGroup.Transitions>
          <VisualState x:Name="Shown">
            <Storyboard>
              <DoubleAnimation Duration="0" Storyboard.TargetName="Root"
              Storyboard.TargetProperty="Opacity" To="1"/>
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Hidden">
            <Storyboard>
              <DoubleAnimation Duration="0" Storyboard.TargetName="Root"
              Storyboard.TargetProperty="Opacity" To="0"/>
            </Storyboard>
          </VisualState>
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <Ellipse Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
      <Ellipse RenderTransformOrigin="0.661,0.321">
        <Ellipse.Fill>
          <RadialGradientBrush GradientOrigin="0.681,0.308">
            <GradientStop Color="#00FFFFFF"/>
            <GradientStop Color="#FF3D3A3A" Offset="1"/>
          </RadialGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
      <Ellipse x:Name="SelectionHighlight" Opacity="0" Fill="Red"/>
      <Ellipse x:Name="MouseOverHighlight" Opacity="0" Fill="White"/>
    </Grid>

  </ControlTemplate>

The above code expects property DataPointTooltipText in the binding datasource.
So to your chart series datasource class add following code…

    public DateTime LastRefreshTime = DateTime.Now;
    public object DataPointTooltipText
    {
        get
        {
            TextBlock tb = new TextBlock();
            tb.Inlines.Add(new Run { Text = "Title: ", FontWeight = FontWeights.Bold }); tb.Inlines.Add(new LineBreak());
            tb.Inlines.Add(new Run { Text = "Updated: " + LastRefreshTime.ToString() });
            tb.Inlines.Add(new LineBreak());
            //if (Growth >= 0)
            tb.Inlines.Add(new Run { Text = "Total Orders: " + _no_of_orders.ToString(), Foreground = new SolidColorBrush(Colors.Green) });
            tb.Inlines.Add(new LineBreak());
            //else
            tb.Inlines.Add(new Run { Text = "Time : " + _transtime.ToString(), Foreground = new SolidColorBrush(Colors.Red) });
            return tb;
        }
    }

5 responses to “Datapoint tooltip for silverlight chart toolkit”

Peter

Sep 21, 2010 at 1:13 pm

A very detailed nice example, there is a simplified version here: http://endofstream.com/charts-creating-custom-style-for-linedatapoint/ for thoes that simply wish to attach a predefined style to a lineseries 🙂

/Peter

LikeLike

Deborah Kurata

Jan 19, 2011 at 6:27 pm

Thank you for the article. I would like to use this technique in each of my charts without having to paste the entire palette into each chart. Is there an easy way to put the palette in as a resource or style or part of a theme that my application could then apply to every chart? I’ve tried several things buch cannot seem to find the appropriate TargetType or syntax to make it work.

Thanks again!

LikeLike

kalpesh

May 11, 2011 at 6:31 am

I have tried many(similar) ways to set a tool tip on column series bars but none of the suggested approach work for me. Most of the guys has suggested to copy default style of columnDataPoint and reference it.
I have tried
<StackPanel>
<ContentControl Content=”{TemplateBinding IndependentValue}” />
<ContentControl Content=”{Binding IndependentValue}” />
<ContentControl Content=”{TemplateBinding FormattedDependentValue}” />
</StackPanel>
in <ToolTipService.ToolTip> section but, tool tip does not displayed for me. I stuck here from last 3 days.
Please help me to fix this behaviour.
Thanks in advance.

LikeLike

Andrei Petrut

Dec 15, 2011 at 9:23 am

@kalpesh: You can try this link that helped me a lot:

http://endofstream.com/charts-creating-custom-style-for-linedatapoint/

LikeLike

Paresh

Sep 8, 2012 at 5:31 am

Hi,
I’m using VS2010 SL5, and create code as you shown but tooltip is not displaying as we want,
it displays default style tooltip.
Thanx,

LikeLike