Question

I’m using datavisualization for silverlight 5. and the Stacked100BarSeries.
I want the count of each group to be displayed in front of the color, like I demonstrated in the image below. By default it’s displayed on the tooltip.
How can I do that ?

XAML:

 <chartingToolkit:Chart Title="Checkups (100% Stacked Bar)">
        <chartingToolkit:Stacked100BarSeries>
            <chartingToolkit:SeriesDefinition ItemsSource="{Binding CheckupsQ1}" DependentValuePath="Count" IndependentValuePath="Species" Title="Q1"/>
            <chartingToolkit:SeriesDefinition ItemsSource="{Binding CheckupsQ2}" DependentValuePath="Count" IndependentValuePath="Species" Title="Q2"/>
            <chartingToolkit:SeriesDefinition ItemsSource="{Binding CheckupsQ3}" DependentValuePath="Count" IndependentValuePath="Species" Title="Q3"/>
            <chartingToolkit:SeriesDefinition ItemsSource="{Binding CheckupsQ4}" DependentValuePath="Count" IndependentValuePath="Species" Title="Q4"/>
        </chartingToolkit:Stacked100BarSeries>
        <chartingToolkit:Chart.Axes>
            <chartingToolkit:CategoryAxis Orientation="Y" Title="Species"/>
            <chartingToolkit:LinearAxis Orientation="X" Title="Percent" ShowGridLines="True"/>
        </chartingToolkit:Chart.Axes>
    </chartingToolkit:Chart>

Code behind:

 public partial class Page1 : Page
{
    public IEnumerable<Pet> CheckupsQ1 { get; private set; }
    public IEnumerable<Pet> CheckupsQ2 { get; private set; }
    public IEnumerable<Pet> CheckupsQ3 { get; private set; }
    public IEnumerable<Pet> CheckupsQ4 { get; private set; }

    public Page1()
    {
        CheckupsQ1 = new Pet[] { new Pet { Species = "Dog", Count = 20 } };
        CheckupsQ2 = new Pet[] { new Pet { Species = "Dog", Count = 20 } };
        CheckupsQ3 = new Pet[] { new Pet { Species = "Dog", Count = 20 } };
        CheckupsQ4 = new Pet[] { new Pet { Species = "Dog", Count = 20 } };

        InitializeComponent();

        DataContext = this;

    }
}

Answer 1

Ok I resolved it.

With Expression blend I Edited the chart templates and this is the xaml that do the magic

(Pay extra attention to the line with the FormattedDependentValue):

  <Style x:Key="@DataPointStyle" TargetType="toolkit:BarDataPoint">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:BarDataPoint">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                x:Name="Root" Margin="0,5,0,5">
                        <Border.Effect>
                            <DropShadowEffect Opacity="0.25" ShadowDepth="1.5" Direction="300"/>
                        </Border.Effect>
                        <Grid Background="{TemplateBinding Background}">
                            <TextBlock Text="{TemplateBinding FormattedDependentValue}" 
                                       FontSize="13"  VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>