Labeled Column Series Chart in Wpf

Question

I am using System.Windows.Controls.DataVisualization.Toolkit.dll to generate charts for my C# based wpf app. Here is my xaml for the chart.

<chartingToolkit:Chart  Name="chartDailySales"   
  Title="Monthly Sales" 
  VerticalAlignment="Top" Margin="10,10,0,0" 
  Height="262" 
  BorderBrush="#00000000" 
  DataContext="{Binding}" 
  IsTabStop="True"
  Background="#ffbcd5c7">

       <!-- Plot area-->
       <chartingToolkit:Chart.PlotAreaStyle>
           <Style TargetType="Grid">
               <Setter Property="Background" Value="White" />
           </Style>
       </chartingToolkit:Chart.PlotAreaStyle>



           <!-- Hide Legend-->
       <chartingToolkit:Chart.LegendStyle>
           <Style TargetType="Control">
               <Setter Property="Width" Value="0"/>
               <Setter Property="Height" Value="0"/>
           </Style>
       </chartingToolkit:Chart.LegendStyle>



       <chartingToolkit:ColumnSeries DependentValuePath="Value" 
        IndependentValuePath="Key" 
        ItemsSource="{Binding}" 
        IsSelectionEnabled="False"
        >


           <chartingToolkit:ColumnSeries.DataPointStyle>
               <Style TargetType="chartingToolkit:ColumnDataPoint">
                   <Setter Property="Background" Value="#ff217346"/>
                   <Setter Property="BorderBrush" Value="#ff217346" />
                   <Setter Property="BorderThickness" Value="1" />

               </Style>

           </chartingToolkit:ColumnSeries.DataPointStyle>

       </chartingToolkit:ColumnSeries>
   </chartingToolkit:Chart>

And Here is the code to fill the data.

List<KeyValuePair<string, double>> monthlySalesList = new List<KeyValuePair<string, double>>();
        monthlySalesList.Add(new KeyValuePair<string, double>("JAN", 1234 ));
        monthlySalesList.Add(new KeyValuePair<string, double>("FEB", 2204));
        monthlySalesList.Add(new KeyValuePair<string, double>("MAR", 3234));
        monthlySalesList.Add(new KeyValuePair<string, double>("APR", 3234));
        monthlySalesList.Add(new KeyValuePair<string, double>("MAY", 5234));
        monthlySalesList.Add(new KeyValuePair<string, double>("JUN", 6234));
        monthlySalesList.Add(new KeyValuePair<string, double>("JUL", 8234));
        monthlySalesList.Add(new KeyValuePair<string, double>("AUG", 6234));
        monthlySalesList.Add(new KeyValuePair<string, double>("SEP", 7234));
        monthlySalesList.Add(new KeyValuePair<string, double>("OCT", 9234));
        monthlySalesList.Add(new KeyValuePair<string, double>("NOV", 11234));
        monthlySalesList.Add(new KeyValuePair<string, double>("DEC", 10234));

        chartDailySales.DataContext = monthlySalesList;

And Here's the output.

Now how do I label the chart as follows.

Thanks.

Answer 1

Why don't you change the Template of the ColumnDataPoint inside the DataPointStyle similar to here

Answer 2

             <charting:ColumnSeries Height="350" Foreground="Black"
                    ItemsSource="{Binding Path=MyCurrentResultsView.ResultsView}"
                    IndependentValueBinding="{Binding Key}"
                    DependentValueBinding="{Binding Value}">
<charting:ColumnSeries.DataPointStyle>
    <Style TargetType="charting:ColumnDataPoint">
        <Setter Property="Template">
            <Setter.Value>
             <ControlTemplate TargetType="charting:ColumnDataPoint">
             <Grid>
                <Rectangle Fill="{TemplateBinding Background}" Stroke="Black"/>
                <Grid Margin="0 -20 0 0" HorizontalAlignment="Center" VerticalAlignment="Top">
                    <TextBlock Text="{TemplateBinding FormattedDependentValue}" Margin="2"/>
                </Grid>
             </Grid>
             </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</charting:ColumnSeries.DataPointStyle>