Change the shape of a Scatter chart item/point to a custom shape

2 posts, 0 answers
  1. Jose Simas
    Jose Simas avatar
    35 posts
    Member since:
    Mar 2009

    Posted 11 Apr 2011 Link to this post


    I have a scatter chart with three series and I need to change the points in two of these series to a plus sign (+). I looked in the documentation but the page below that covers styling does not mention the scatter series.

    I tried restyling ScatterPoint and in its template I found the property PointMark.ShapeStyle which appears to be what I need to apply a new style to. But since the Shape is an enumeration I don't know how to proceed. Would you be kind enough to give me a pointer?

  2. Yavor
    Yavor avatar
    401 posts

    Posted 14 Apr 2011 Link to this post

    Hi Jose Simas,

    Changing the shape of the pointmark can be done by retemplating the ScatterPoint control (the class that represents 1 point on the screen).

    You can create a custom style for your scatter points like this:
    <Style x:Key="CustomPoint"
            <Setter Property="Size" Value="50" />
            <Setter Property="Template">
                <ControlTemplate TargetType="telerikCharting:PointMark">
                        <Path x:Name="PART_PointMarkPath"
                            Canvas.Left="{TemplateBinding PointMarkCanvasLeft}"
                            Canvas.Top="{TemplateBinding PointMarkCanvasTop}"
                            Style="{TemplateBinding ShapeStyle}"
                            Width="{TemplateBinding Size}"
                            Height="{TemplateBinding Size}"
                                Data="M4,0 L5,0 L5,4 L9,4 L9,5 L5,5 L5,9 L4,9 L4,5 L0,5 L0,4 L4,4 z"/>
    <Style x:Key="CustomScatter"  TargetType="telerikCharting:ScatterPoint">
        <Setter Property="Template" >
                <ControlTemplate TargetType="telerikCharting:ScatterPoint">
                    <Canvas x:Name="PART_MainContainer">
                        <telerikCharting:PointMark x:Name="PART_PointMark"
                                                Canvas.Top="{TemplateBinding StartPointY}"
                                                PointMarkCanvasLeft="{TemplateBinding PointMarkCanvasLeft}"
                                                PointMarkCanvasTop="{TemplateBinding PointMarkCanvasTop}"
                                                ShapeStyle="{TemplateBinding PointMarkShapeStyle}"
                                                    Style="{StaticResource CustomPoint}"  />

    Now you can set this as an item style for your scatter series just like other series:
    series.Definition = new ScatterSeriesDefinition() { ItemStyle = this.Resources["CustomScatter"] as Style };

    Hope this helps!

    Yavor Ivanov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top