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:
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:
Thanks,
Louis
<
Window
x:Class
=
"PointTemplate.MainWindow"
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