This KB explains how to show a custom data marker in the WPF Chart. You can show the custom adornment symbols in series using the ChartAdornmentInfo SymbolTemplate property by the following steps. Define the desired symbol in the ResourceDictionary using the DataTemplate. And assign the declared DataTemplate to the SymbolTemplate property of ChartAdornmentInfo as per the following code snippet. <syncfusion:SfChart > <syncfusion:SfChart.Resources> <ResourceDictionary> <DataTemplate x:Key="crossTemplate"> <Grid Height="15" Width="15"> <Path Stretch="Fill" Stroke="{Binding Interior}" Fill="{Binding Interior}" Data="F1 M 133.133,45.7109L 154.307, 24.5363L 175.482,45.7109L 154.307,66.8856L 175.482,88.0603L 154.307,109.235L 133.133,88.0603L 111.958,109.235L 90.7835, 88.0603L 111.958,66.8856L 90.7835,45.7109L 111.958,24.5363L 133.133,45.7109 Z " /> </Grid> </DataTemplate> </ResourceDictionary> </syncfusion:SfChart.Resources> ……… <syncfusion:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"> <syncfusion:LineSeries.AdornmentsInfo> <syncfusion:ChartAdornmentInfo SymbolTemplate="{StaticResource crossTemplate}"> </syncfusion:ChartAdornmentInfo> </syncfusion:LineSeries.AdornmentsInfo> </syncfusion:LineSeries> </syncfusion:SfChart> Output: See also: How to show multiple custom data marker based on value in chart series How to rotate text in data marker How to display the labels inside segmentsConclusionI hope you enjoyed learning about how to vary the custom shapes in WPF Chart.You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation 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!
This KB explains how to show a custom data marker based on value in the WPF Chart series. You can show the custom data marker in chart using the ChartAdornmentInfo SymbolTemplate property by the following steps. You can display a custom symbol by following this KB article and you can download the complete sample from the following link. How to show different data marker based on value in the WPF chart? In addition, you can show multiple symbols based on the value by using the DataTemplateSelector to select the symbols and assign the declared data template to the SymbolTemplate property as per the following code example. XAML <syncfusion:SfChart > <syncfusion:SfChart.Resources> <ResourceDictionary> <DataTemplate x:Key="CrossTemplate"> …….. </DataTemplate> <DataTemplate x:Key="DiamondTemplate"> <Grid Height="15" Width="15"> <Path Stretch="Fill" Stroke="{Binding Interior}" Fill="{Binding Interior}" Data="F1 M 156.37,93.7292L 134.634, 71.8159L 112.906,49.9025L 91.1711,71.8159L 69.4364,93.7292L 70.1524,93.7292L 91.8844,115.644L 113.623,137.556L 135.362, 115.644L 157.09,93.7292L 156.37,93.7292 Z " /> </Grid> </DataTemplate> <local:SymbolDataTemplateSelector HighValueTemplate="{StaticResource CrossTemplate}" LowValueTemplate="{StaticResource DiamondTemplate}" x:Key="SymbolTemplateSelectorKey"/> <DataTemplate x:Key="symbolTemplate"> <ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource SymbolTemplateSelectorKey}" /> </DataTemplate> </ResourceDictionary> </syncfusion:SfChart.Resources> ……… <syncfusion:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"> <syncfusion:LineSeries.AdornmentsInfo> <syncfusion:ChartAdornmentInfo SymbolTemplate="{StaticResource symbolTemplate}"> </syncfusion:ChartAdornmentInfo> </syncfusion:LineSeries.AdornmentsInfo> </syncfusion:LineSeries> </syncfusion:SfChart> C# public class SymbolDataTemplateSelector : DataTemplateSelector { public DataTemplate HighValueTemplate { get; set; } public DataTemplate LowValueTemplate { get; set; } public override DataTemplate SelectTemplate(object item, DependencyObject container) { if (item == null) return null; var adornment = item as ChartAdornment; var model = adornment.Item as Model; //You can change the value based on your requirement if (model.YValue > 150) { return HighValueTemplate; } else { return LowValueTemplate; } } } Output: See also: How to rotate text in data marker How to display custom data marker in chart series How to display the labels inside segments
Description: There are various types of chart series like Line, Column, Bubble, Area, and each type has its own shape and requirement. When a particular shape is not available by default, you can customize the default shape of any series as follows. Solution: You can define the custom templates for the series in the SfChart by using the CustomTemplate property. The DataTemplate defined in this property renders for each data point. This template gets the corresponding segment as the DataContext. For instance, on defining a template for ColumnSeries, the ColumnSegment comes as data context for that DataTemplate. Note: The CustomTemplate property supports limited series only. XAML <Window.Resources> <local:LabelConverter x:Key="labelConverter"/> <DataTemplate x:Key="columnSegment"> <Canvas> <local:CustomControl Width="{Binding Width}" Height="{Binding Height}" Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"/> </Canvas> </DataTemplate> </Window.Resources> <!--CustomTemplate of the series is assigned with customized DataTemplate--> <syncfusion:ColumnSeries CustomTemplate="{StaticResource columnSegment}" ItemsSource="{Binding Computers}" XBindingPath="Computer" YBindingPath="Year2014" syncfusion:ChartSeriesBase.Spacing="0.5"> </syncfusion:ColumnSeries> C# public class CustomControl : ContentControl { public PointCollection Data { get; set; } public CustomControl() { Data = new PointCollection(); this.Loaded += CustomControl_Loaded; } public void DrawPolygon() { Polygon columnSegment = new Polygon(); columnSegment.Fill = new SolidColorBrush(Colors.SkyBlue); double center = Width / 2; Data.Add(new Point(0, Height)); Data.Add(new Point(Width, Height)); Data.Add(new Point(Width, 35)); Data.Add(new Point(center, 0)); Data.Add(new Point(0, 35)); columnSegment.Points = Data; Content = columnSegment; } void CustomControl_Loaded(object sender, RoutedEventArgs e) { DrawPolygon(); } } C# public class LabelConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return String.Format("+ {0} %", value); } //This method is not needed but it is implemented for the interface. public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } } Output: The following screenshot illustrates the output for the custom column segments, here it is a Polygon. Figure 1: SfChart with custom polygon series
Syncfusion controls enable you to use a control and implement your own design. You can design the controls to match certain themes by editing the Style and Template property of the control. In the following code example, SfHubTile and SfTextBoxExt controls are customized to match a certain theme. XAML <Page x:Class="CustomTheme.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:CustomTheme" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input" xmlns:notification="using:Syncfusion.UI.Xaml.Controls.Notification" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Page.Resources> <SolidColorBrush x:Name="TextForegroundBrush" Color="#FF415462"/> <SolidColorBrush x:Name="ControlBackgroundBrush" Color="#FFC3C4C5"/> <SolidColorBrush x:Name="HubBackgroundBrush" Color="#FF1E3241"/> </Page.Resources> <Grid Background="{StaticResource ControlBackgroundBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <input:SfTextBoxExt Text="Doors Locks"> <input:SfTextBoxExt.Style> <Style TargetType="input:SfTextBoxExt" > <Setter Property="FontSize" Value="20"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Padding" Value="0"/> <Setter Property="Margin" Value="0 20 0 0"/> <Setter Property="Foreground" Value="{StaticResource TextForegroundBrush}"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> </Style> </input:SfTextBoxExt.Style> </input:SfTextBoxExt> <Pivot Grid.Row="1"> <PivotItem Header="locks" Margin="0" Foreground="{StaticResource TextForegroundBrush}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <input:SfTextBoxExt Text="last known status"> <input:SfTextBoxExt.Style> <Style TargetType="input:SfTextBoxExt"> <Setter Property="FontSize" Value="15"/> <Setter Property="Padding" Value="0"/> <Setter Property="Margin" Value="10 0 0 0"/> <Setter Property="Foreground" Value="{StaticResource TextForegroundBrush}"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> </Style> </input:SfTextBoxExt.Style> </input:SfTextBoxExt> <input:SfTextBoxExt Text="unlocked" Grid.Row="1"> <input:SfTextBoxExt.Style> <Style TargetType="input:SfTextBoxExt"> <Setter Property="FontSize" Value="50"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Padding" Value="0"/> <Setter Property="Margin" Value="10 0 0 0"/> <Setter Property="Foreground" Value="{StaticResource TextForegroundBrush}"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> </Style> </input:SfTextBoxExt.Style> </input:SfTextBoxExt> <input:SfTextBoxExt Text="days hours minutes" Grid.Row="2"> <input:SfTextBoxExt.Style> <Style TargetType="input:SfTextBoxExt"> <Setter Property="FontSize" Value="20"/> <Setter Property="Padding" Value="0"/> <Setter Property="Margin" Value="10 0 0 0"/> <Setter Property="Foreground" Value="{StaticResource TextForegroundBrush}"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> </Style> </input:SfTextBoxExt.Style> </input:SfTextBoxExt> <Grid Grid.Row="4"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <notification:SfHubTile Background="{StaticResource HubBackgroundBrush}" Height="200" VerticalAlignment="Top" Margin="10,10,10,0" > <notification:SfHubTile.HeaderTemplate> <DataTemplate> <input:SfTextBoxExt Text="lock" Margin="40 0" Foreground="White" Background="Transparent" BorderBrush="Transparent" RenderTransformOrigin="1.538,0.349"/> </DataTemplate> </notification:SfHubTile.HeaderTemplate> <Image Source="Images/Lock-Open.png" Stretch="Uniform"/> </notification:SfHubTile> <notification:SfHubTile Grid.Column="1" Background="{StaticResource HubBackgroundBrush}" Height="200" VerticalAlignment="Top" Margin="10,10,10,0" > <notification:SfHubTile.HeaderTemplate> <DataTemplate> <input:SfTextBoxExt Text="unlock" Margin="30 0" Foreground="White" Background="Transparent" BorderBrush="Transparent" RenderTransformOrigin="1.538,0.349"/> </DataTemplate> </notification:SfHubTile.HeaderTemplate> <Image Source="Images/Lock.png" Stretch="Uniform"/> </notification:SfHubTile> </Grid> </Grid> </PivotItem> <PivotItem Header="doors" Margin="0"> </PivotItem> </Pivot> <Grid Background="{StaticResource HubBackgroundBrush}" Grid.Row="2"> <AppBarButton Click="AppBarButton_Click" HorizontalAlignment="Center"> <Image Source="Images/Command-Reset.png" Stretch="Uniform"/> </AppBarButton> </Grid> </Grid> </Page> The following screenshot displays the customized SfHubTile and SfTextBoxExt. Figure 1: Customized SfHubTile and SfTextBoxExt In the following code example, SfTreeNavigator is customized. XAML <Page x:Class="CustomTheme.BlankPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:CustomTheme" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input" xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Page.DataContext> <local:ViewModel/> </Page.DataContext> <Page.Resources> <SolidColorBrush x:Name="TextForegroundBrush" Color="#FF415462"/> <SolidColorBrush x:Name="ControlBackgroundBrush" Color="#FFC3C4C5"/> <SolidColorBrush x:Name="HubBackgroundBrush" Color="#FF1E3241"/> <Style TargetType="input:SfTextBoxExt" x:Key="HeaderStyle"> <Setter Property="FontSize" Value="20"/> <Setter Property="Padding" Value="0"/> <Setter Property="Margin" Value="0 20 0 0"/> <Setter Property="Foreground" Value="#FF415462"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> </Style> <Style TargetType="input:SfTextBoxExt" x:Key="HubStyle"> <Setter Property="FontSize" Value="24"/> <Setter Property="Padding" Value="0"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Foreground" Value="#FF1A1A1A"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> </Style> <DataTemplate x:Key="TreeTemplate"> <Grid Background="Transparent"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Image Source="{Binding ImagePath}" Stretch="Uniform"/> <input:SfTextBoxExt Text="{Binding Name}" Grid.Column="1" Style="{StaticResource HubStyle}"/> </Grid> </DataTemplate> </Page.Resources> <Grid Background="{StaticResource HubBackgroundBrush}"> <Pivot> <PivotItem Header="features" Margin="0"> <Grid Background="{StaticResource ControlBackgroundBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <StackPanel> <input:SfTextBoxExt Text="status" Style="{StaticResource HeaderStyle}"/> <navigation:SfTreeNavigator Grid.Row="1" ItemsSource="{Binding Status}" ItemTemplate="{StaticResource TreeTemplate}"></navigation:SfTreeNavigator> <input:SfTextBoxExt Text="location" Grid.Row="2" Style="{StaticResource HeaderStyle}"/> <navigation:SfTreeNavigator Grid.Row="3" ItemsSource="{Binding Location}" ItemTemplate="{StaticResource TreeTemplate}"></navigation:SfTreeNavigator> </StackPanel> </Grid> </PivotItem> <PivotItem Header="edit" Margin="0"> </PivotItem> </Pivot> </Grid> </Page> C# public class ViewModel { public ViewModel() { Status = new ObservableCollection<Model>(); Status.Add(new Model("dashboard", "/Images/status1.png")); Status.Add(new Model("doors & locks", "/Images/ status2.png")); Status.Add(new Model("heater", "/Images/ status3.png")); Status.Add(new Model("remote start", "/Images/ status4.png")); Location = new ObservableCollection<Model>(); Location.Add(new Model("map", "/Images/Location1.png")); Location.Add(new Model("Honk & Flash", "/Images/Location2.png")); } private ObservableCollection<Model> status; public ObservableCollection<Model> Status { get { return status; } set { status = value; } } private ObservableCollection<Model> location; public ObservableCollection<Model> Location { get { return location; } set { location = value; } } } public class Model { public Model(string name, string ipath) { Name = name; ImagePath = ipath; } private string imagepath; public string ImagePath { get { return imagepath; } set { imagepath = value; } } private string name; public string Name { get { return name; } set { name = value; } } } The following screenshot displays the customized SfTreeNavigator. Figure 2: Customized SfTreeNavigator
You can define the custom templates for series in WPF Chart (SfChart) by using the CustomTemplate property. The DataTemplate that defined in this property renders for each data point. This template gets the corresponding segment as the DataContext. For instance, on defining a template for LineSeries, the LineSegment comes as data context for that DataTemplate. Note:This CustomTemplate property supports limited series only. XAML <Window.Resources> <local:LabelConverter x:Key="labelConverter"/> <DataTemplate x:Key="columnSegment"> <Canvas> <local:CustomControl Width="{Binding Width}" Height="{Binding Height}" Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"/> </Canvas> </DataTemplate> </Window.Resources> . .<!--CustomTemplate of the series is assigned with customized DataTemplate--> <syncfusion:ColumnSeries CustomTemplate="{StaticResource columnSegment}" ItemsSource="{Binding Computers}" XBindingPath="Computer" YBindingPath="Year2014" syncfusion:ChartSeriesBase.Spacing="0.5"> <!--LabelTemplate of the adornment is assigned with customized DataTemplate--> <syncfusion:ColumnSeries.AdornmentsInfo> <syncfusion:ChartAdornmentInfo ShowLabel="True" SegmentLabelContent="YValue" AdornmentsPosition="Top"/> </syncfusion:ColumnSeries.AdornmentsInfo> </syncfusion:ColumnSeries> C# public class CustomControl : ContentControl { public PointCollection Data { get; set; } public CustomControl() { Data = new PointCollection(); this.Loaded += CustomControl_Loaded; } public void DrawPolygon() { Polygon columnSegment = new Polygon(); columnSegment.Fill = new SolidColorBrush(Colors.SkyBlue); double center = Width / 2; Data.Add(new Point(0, Height)); Data.Add(new Point(Width, Height)); Data.Add(new Point(Width, 35)); Data.Add(new Point(center, 0)); Data.Add(new Point(0, 35)); columnSegment.Points = Data; Content = columnSegment; } void CustomControl_Loaded(object sender, RoutedEventArgs e) { DrawPolygon(); } } Conclusion I hope you enjoyed learning about how to customize the default shape in WPF Chart.You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation 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!
