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