How to bind the underlying DataTable model to the DataMarker Template in WPF Charts?
Description
The WPF SfChart supports data binding from a DataTable, and also allows customzation of chart data markers. This article describes how to bind an underlying item of the DataTable model to the data marker template in WPF chart. Follow the steps below to implement this functionality.
Step 1: First, you need to bind the data table to the chart's ItemsSource collection. You can refer to this KB article for guidance on binding a DataTable to a chart.
Step 2: Next, 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.
XAML
<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>
C#
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;
}
}
Output
You can download the complete sample from GitHub here.
Conclusion
I hope you enjoyed learning about how to bind the underlying DataTable model to the DataMarker Template in WPF Charts.
You can refer to our WPF Charts feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Charts example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
