We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the default shape of any series with the required shapes?

Platform: WinRT |
Control: SfChart |
Published Date: February 11, 2015 |
Last Revised Date: June 27, 2019


There are various chart type series such as line, column, bubble, area, etc., and each type has its own shape and requirement. This article shows how to customize default shape of any series when the required shape is not available. 


You can define the custom templates for series in chart 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.


This CustomTemplate property supports limited series only.


        <local:LabelConverter x:Key="labelConverter"/>
        <DataTemplate x:Key="columnSegment">
               <local:CustomControl  Width="{Binding Width}" Height="{Binding Height}"                                                                                           
Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"/>
<!--CustomTemplate of the series is assigned with customized DataTemplate--> 
 <syncfusion:ColumnSeries     CustomTemplate="{StaticResource columnSegment}"
                                         ItemsSource="{Binding Computers}"
  <!--LabelTemplate of the adornment is assigned with customized DataTemplate-->
<syncfusion:ChartAdornmentInfo ShowLabel="True" SegmentLabelContent="YValue" AdornmentsPosition="Top"/>


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)

The following screenshot illustrates the custom column segments, here Polygons.

OutputChart series with custom shape in WPF




You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon