How to Customize the Default Shape in WPF Chart?
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.
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!
