How can you create custom columns in Chart series?
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
