|
Description: 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. Solution: 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. 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();
}
}
The following screenshot illustrates the custom column segments, here Polygons. Output
|
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
