Silverlight 3 Toolkit Charting : How to display the value on the bar ?

Question

Silverlight 3 toolkit charting is awesome. I am using BarSeries and silverlight is showing the length of the bar proportional to the value bound. But is there any way to get the actual value on the bar or just next to the bar? Here is my XAML

<chartingToolkit:Chart
                        Grid.Column="1"
                        x:Name="chartEnvironmentStatusGlobal"
                        Title="Environment Status">
                        <chartingToolkit:BarSeries
                            x:Name="chartEnvironmentStatus"
                            Title="Pass"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="Green"
                            IndependentValueBinding="{Binding Path=Instance}"
                            DependentValueBinding="{Binding Path=Count}"
                            AnimationSequence="LastToFirst">
                            </chartingToolkit:BarSeries>
                        <chartingToolkit:BarSeries
                            x:Name="chartEnvironmentStatus1"
                            Title="Fail"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="Red"
                            IndependentValueBinding="{Binding Path=Instance}"
                            DependentValueBinding="{Binding Path=Count}"
                            AnimationSequence="LastToFirst">
                            </chartingToolkit:BarSeries>
                    </chartingToolkit:Chart>

Thank you in advance.

Answer 1

You will need to create a new template for the BarDataPoint. I'll not post the whole template here because a) its quite large and b) I'm not sure where I stand on Copyright.

You can get the existing Template fairly easily if you have blend you should be able to create copy with the tool. Alternatively you can get it from the source code its found in:-

#someSourceCodeRootFolder\Controls.DataVisualization.Toolkit\Charting\DataPoint\BarDataPoint.xaml

In a resource dictionary create this:-

<Style x:Key="BarDataPointWithContent" TargetType="charting:BarDataPoint">
  <Setter Property="Template">
    <Setter.Value>
      <Border ... copy from original template... >
         <!-- Wads of original VisualStateManager stuff here -->
         <Grid Background="{TemplateBinding Background}">
           <!-- Original set of Rectangles and Border here -->
           <TextBlock Text="{TemplateBinding FormattedDependentValue}"
             HorizontalAlignment="Center" />
         </Grid>
         <ToolTipService.ToolTip>
             <!-- Do something different here perhaps -->
         </ToolTipService.ToolTip>
      </Border>
    </Setter.Value>
  </Setter>
</Style>

Basically what I've done is added that final TextBlock and bound it to the same FormattedDependentValue property that the ToolTip uses in its ContentControl. You could add further styling to the TextBlock to get the appearance that you want, you may also wish to do something different with the tool tip content.

So with this style hanging about you can do this in the chart itself:-

<chartingToolkit:BarSeries.DataPointStyle>
  <Style TargetType="BarDataPoint" BasedOn="{StaticResouce BarDataPointWithContent}" >
    <Setter Property="Background" Value="Red" />
  </Style>
</chartingToolkit:BarSeries.DataPointStyle>

Note to lurking MSofties

Can you please add the Templates to the documentation somewhere so that we don't need source code, Blend or Reflector to extract them?