PointTemplate getting clipped for ScatterPointSeries

[Louis]

I'm having a problem where my PointTemplate is getting clipped for a ScatterPointSeries. It appears to be working correctly for a BarSeries styled as points, but when I use the same template for ScatterPointSeries it appears to be clipping negative drawn values. This example shows the problem:

<Window x:Class="PointTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="CircleTemplate">
                <Ellipse Width="8" Height="8" VerticalAlignment="Center" Fill="Black" />
            </DataTemplate>
            <DataTemplate x:Key="XTemplate">
                <Path Stroke="Black" Data="M -4,-4 L 4,4 M 4,-4 L -4,4"/>
                <!-- This shows the whole X, but X doesn't mark the spot! -->
                <!-- <Path Stroke="Black" Data="M 0,0 L 8,8 M 8,0 L 0,8"/> -->
            </DataTemplate>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <telerik:RadCartesianChart x:Name="TimeChart" Grid.Row="0">
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis LabelFitMode="Rotate" LabelFormat="MMM-yy" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:BarSeries PointTemplate="{StaticResource XTemplate}"
                                   ItemsSource="{Binding Data}" CategoryBinding="Date" ValueBinding="YValue" />
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>

        <telerik:RadCartesianChart x:Name="ScatterChart" Grid.Row="1">
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:ScatterPointSeries PointTemplate="{StaticResource XTemplate}"
                                            ItemsSource="{Binding Data}" XValueBinding="XValue" YValueBinding="YValue" />
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
    </Grid>
</Window>

Note that the top chart shows the X markers correctly, whereas the bottom, which is using the same template, is clipped. In this example if you use the CircleTemplate both show correctly, however in my real project it again shows correctly on the BarSeries chart, but gets clipped on the Scatter chart. In this case, if the VerticalAlignment is set to Top, it shows the top left quarter of the circle, and if it's set to center, it shows a square smaller than the circle.

Is there a way to expand the size of what the markers are allowed to fill for scatter series?

For completeness, here's my code-behind for this example:

using System;
using System.Windows;
using System.Collections.ObjectModel;

namespace PointTemplate
{
    public class DataPoint
    {
        public DateTime Date { get; set; }
        public double YValue { get; set; }
        public double XValue { get; set; }
    }
    public partial class MainWindow : Window
    {
        public Collection<DataPoint> Data { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            Data = new Collection<DataPoint>();
            Data.Add(new DataPoint() { Date = new DateTime(2013, 1, 1), XValue = 10, YValue = 20 });
            Data.Add(new DataPoint() { Date = new DateTime(2013, 2, 1), XValue = 20, YValue = 20 });
            Data.Add(new DataPoint() { Date = new DateTime(2013, 3, 1), XValue = 30, YValue = 40 });
            Data.Add(new DataPoint() { Date = new DateTime(2013, 4, 1), XValue = 40, YValue = 35 });
            Data.Add(new DataPoint() { Date = new DateTime(2013, 5, 1), XValue = 50, YValue = 40 });
            Data.Add(new DataPoint() { Date = new DateTime(2013, 6, 1), XValue = 60, YValue = 30 });
            Data.Add(new DataPoint() { Date = new DateTime(2013, 7, 1), XValue = 70, YValue = 50 });
            this.DataContext = this;
        }
    }
}

Thanks,
Louis

[Petar Marchev]

Hello Louis,

Thank you for the attached code snippets, I was able to create a new project right away, compiled and ran it. I reproduced the behavior you describe.

I see that you have tried using Data="M 0,0 L 8,8 M 8,0 L 0,8" and have commented that it does not mark the spot. I tested it and it seemed fine on my side. I have attached a snapshot (ScatterData8.png) for your reference. If you get different results please let us know because this seems to be the proper solution here.

I take it that the BarSeries is not the target here, so I will not talk about it.

As for the clipping effect in the scatter series - the reason for this lies in the WPF framework. You must set a proper Width and Heigth (in this current case a value greater than 5):

<Path Stroke="Black" Data="M -4,-4 L 4,4 M 4,-4 L -4,4" Width="8" Height="8" />

This will avoid clipping but the point seems misplaced in the demo project I have so I do not suggest you use it.

The reason that the path gets clipped is that its parent element (ContentPresenter) cannot fully fit the path inside it. This you can reproduce with this code (I have attached a Clipping.png for your reference ):

<Grid>
 <Grid.RowDefinitions>
  <RowDefinition Height="1*"/>
  <RowDefinition Height="1*"/>
  <RowDefinition Height="1*"/>
 </Grid.RowDefinitions>
 <Border Grid.Row="1" BorderBrush="#77FF1122" BorderThickness="1" Margin="80 0 40 0" >
  <Path Stroke="Black" Data="M -40,-40 L 40,40 M 40,-40 L -40,40"  />

So you can either:
1. Use the Path you commented, which should work as expected. Try setting explicit Width and Height of 8.
2. Use a Border (explicit Width and Height) in the DataTemplate which contains the Path.

Let us know if you are able to apply any of these or if you have any other questions.

Regards,
Petar Marchev
Telerik