Category / Section
How to customize the default shape of WPF Chart (SfChart) series?
1 min read
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();
}
}
