Articles in this section
Category / Section

How can you create custom columns in Chart series?

1 min read

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 LineSeriesthe LineSegment comes as data context for that DataTemplate.

http://www.syncfusion.com/uploads/user/kb/wpf/wpf-17434/wpf-17434_img1.jpegNoteThe 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.

F:\Issue Files Chart\Issue File -10 Knowledge Base\WP_ScreenShot\New Second TIme\wp_ss_20150210_0013.png

Figure 1: SfChart with custom polygon series

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied