CODEWITHSUNDEEP
c#wpfchartsdata-visualizationmschart
Redone
Redone

Reputation: 1313

Labeled Column Series Chart in Wpf

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. enter image description here

Now how do I label the chart as follows. enter image description here

Thanks.

Upvotes: 6

Views: 6751

Answers (3)

parth
parth

Reputation: 101

             <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>

Upvotes: 1

ahazzah
ahazzah

Reputation: 776

How about something like this:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        x:Class="WpfApplication1.MainWindow"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <Style x:Key="ColumnDataPointStyle1"
               TargetType="{x:Type chartingToolkit:ColumnDataPoint}">
            <Setter Property="Background"
                    Value="#ff217346" />
            <Setter Property="BorderBrush"
                    Value="#ff217346" />
            <Setter Property="BorderThickness"
                    Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type chartingToolkit:ColumnDataPoint}">
                        <Grid>
                            <Rectangle Fill="{TemplateBinding Background}"
                                       Stroke="Black" />
                            <TextBlock Text="{TemplateBinding FormattedDependentValue}" Foreground="Black" Margin="0,-14,0,0" FontSize="8" FontWeight="Bold" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid>

        <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"
                                          DataPointStyle="{DynamicResource ColumnDataPointStyle1}" />
        </chartingToolkit:Chart>

    </Grid>
</Window>

Upvotes: 0

atomaras
atomaras

Reputation: 2568

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

Upvotes: 2

Related Questions