Telerik blogs

RadChart supported point mark visual indicators for chart series like Line, Area, Spline, etc. from version one, however, customization of these indicators was hard and certainly not for the faint-hearted. With the latest version of the control released this week (Q1 2009 SP1) we introduced two major improvements that significantly simplify the interaction with the point mark indicators.

 

Option 1: Customizing the appearance of the point marks through the PointMark API and predefined point mark shapes

RadChart supports 8 predefined shapes that you can use for the point marks (members of the Telerik.Windows.Controls.Charting.MarkerShape enumeration):

  • Circle (default)
  • Diamond
  • Hexagon
  • Triangle
  • Square
  • SquareRounded
  • StarFiveRay
  • StarEightRay

 

Here is a sample code snippet that demonstrates customizing the point mark to use Diamond shape:

C#
DataSeries series = new DataSeries()
           
{
               
new DataPoint(20),
               
...,
               
new DataPoint(90)
           
};

series.Definition = new LineSeriesDefinition();
series.Definition.Appearance.PointMark.Shape = MarkerShape.Diamond;

RadChart1.DefaultView.ChartArea.DataSeries.Add(series);
 
 
And here is the resultant view:
chart_diamond
 
 
You might decide that you need to tweak the point mark fill and stroke colors a bit as well – again you can use the provided API like this:
 
C#
DataSeries series = new DataSeries()
                       
{
                           
new DataPoint(20),
                           
...,
                           
new DataPoint(90)
                       
};

series.Definition = new LineSeriesDefinition();
series.Definition.Appearance.PointMark.Shape = MarkerShape.Diamond;
series.Definition.Appearance.PointMark.Fill = new SolidColorBrush(Colors.Orange);
series.Definition.Appearance.PointMark.Stroke = new SolidColorBrush(Colors.Red);

RadChart1.DefaultView.ChartArea.DataSeries.Add(series);
 
 
Here is the result again:
chart_diamond_custom_colors
 
Option 2: Customizing the appearance of the point mark with custom shapes through re-templating
Should you decide that the predefined point mark shapes do not fit your scenario, you can define custom path geometries for the point mark object as well. The following template defines cross shape as a resource (note that besides the template, the style defines custom size for the point mark as well):
 
XAML
<UserControl x:Class="SilverlightApplication9.Page"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:control
="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting" 
    xmlns:chart
="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting">
   
<Grid x:Name="LayoutRoot" Background="White">
       
<Grid.Resources>
       
<Style x:Name="CustomStyle" TargetType="chart:PointMark">
            <Setter Property
="Size" Value="15" />
            <Setter Property
="Template">
                <Setter
.Value>
                    <ControlTemplate TargetType
="chart:PointMark">
                        <Canvas
>
                        <Path x
:Name="PART_PointMarkPath"
                              Style
="{TemplateBinding ShapeStyle}
                              Width
="{TemplateBinding Size}
                              Height
="{TemplateBinding Size}"
                              Stretch
="Fill"
                              Data
="F1 M 6.5,3.5 L 3.5,0.5 0.5,3.5 3.5,6.5 0.5,9.5 3.5,12.5 6.5,9.5 9.5,12.5 12.5,9.5 9.5,6.5 12.5,3.5 9.5,0.5 6.5,3.5 Z">
                        <
/Path>
                        <
/Canvas>
                    <
/ControlTemplate>
                <
/Setter.Value>
            <
/Setter>
        </
Style>
       
</Grid.Resources>
       
<control:RadChart x:Name="RadChart1" />
    </
Grid>
</UserControl>

 

And in order to instruct the chart to utilize this template instead of the default one you need to set the SeriesDefinition.PointMarkItemStyle property like this (note that setting fill / stroke through the API would work in this scenario as well):

C#

DataSeries series = new DataSeries()
                       
{
                           
new DataPoint(20),
                           
...,
                           
new DataPoint(90)
                       
};

series.Definition = new LineSeriesDefinition();
series.Definition.PointMarkItemStyle = this.CustomStyle;

RadChart1.DefaultView.ChartArea.DataSeries.Add(series);
 
 
Here is the result:
chart_custom_shape
 
 
You can find attached a sample application that demonstrates the latter scenario for you to review.
 

Comments

Comments are disabled in preview mode.