Articles in this section
Category / Section

How to bind the underlying DataTable model to the DataMarker Template in WPF Charts?

1 min read

This article describes how to bind the underlying item of the data table model to the data marker template in WPF chart by following these steps:

Step 1: First, you need to bind the data table to the chart ItemsSource collection by following this KB article.

Step 2: Then, you can display the underlying item of the data table model in data marker, by using the LabelTemplate in ChartAdornmentInfo class as demonstrated in the following code example.

 

<Grid>
        <Grid.Resources>
            <DataTemplate x:Key="adornment">
                <TextBlock  Text="{Binding Item.ItemArray[2]}" FontSize="13" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" >
                </TextBlock>
            </DataTemplate>
        </Grid.Resources>
        <Grid.DataContext>
            <local:ViewModel />
        </Grid.DataContext>
        <chart:SfChart Margin="20">
            <chart:SfChart.PrimaryAxis>
                <chart:CategoryAxis Interval="1"></chart:CategoryAxis>
            </chart:SfChart.PrimaryAxis>
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis Maximum="9000"></chart:NumericalAxis>
            </chart:SfChart.SecondaryAxis>
 
            <chart:ColumnSeries x:Name="series"
                                Palette="Metro"                             
                                ItemsSource="{Binding DataModel}"
                                XBindingPath="Month" YBindingPath="Value">
                <chart:ColumnSeries.AdornmentsInfo>
                    <chart:ChartAdornmentInfo LabelTemplate="{StaticResource adornment}" AdornmentsPosition="Top" VerticalAlignment="Top" HorizontalAlignment="Center" ShowLabel="True" SegmentLabelContent="LabelContentPath" />
                </chart:ColumnSeries.AdornmentsInfo>
            </chart:ColumnSeries>
        </chart:SfChart>
    </Grid>

 

 

  public class Model
    {
        public string Month{get;set;}
 
        public double Value { get; set; }
 
        public string Description { get; set; }
    }
 
    public class ViewModel
    {
 
        public ViewModel()
        {
            DataModel = GetData();
        }
        public DataTable DataModel
        {
            get;
            set;
        }
        public DataTable GetData()
        {
            DataTable data = new DataTable();
            //Add Columns
            data.Columns.Add("Value", typeof(int));
            data.Columns.Add("Month", typeof(string));
            data.Columns.Add("Description", typeof(string));
            //Add Rows
            data.Rows.Add(250, "April","Very Low");
            data.Rows.Add(750, "May","Low");
            data.Rows.Add(7500, "June","Very High");
            data.Rows.Add(3650, "July","High");
            data.Rows.Add(2250, "August", "Intermediate");
 
            //return data
            return data;
        }
    }

 

Binding adornment from data table

Download complete sample here

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied