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

[Jose Simas]

Hi,

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.

http://www.telerik.com/help/wpf/radchart-styling-and-appearance-styling-chart-series.html

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?

Cheers,
Jose

[Yavor]

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"
    TargetType="telerikCharting:PointMark">
        <Setter Property="Size" Value="50" />
        <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikCharting:PointMark">
                <Canvas>
                    <Path x:Name="PART_PointMarkPath"
                        Canvas.Left="{TemplateBinding PointMarkCanvasLeft}"
                        Canvas.Top="{TemplateBinding PointMarkCanvasTop}"
                        Style="{TemplateBinding ShapeStyle}"
                        Width="{TemplateBinding Size}"
                        Height="{TemplateBinding Size}"
                        Stretch="Fill"
                            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"/>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="CustomScatter"  TargetType="telerikCharting:ScatterPoint">
    <Setter Property="Template" >
        <Setter.Value>
            <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}"  />
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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!

Greetings,
Yavor Ivanov
the Telerik team