ScatterLineSeries not rendering correctly with large dataset

[Charlie]

I am using the following code to render a ScatterLineSeries. The chart renders with points that do not represent real data. Up until 250 inches there is no data with a negative value, which the chart shows. Zooming into the chart, it can clearly be seen to render all values positive.

My data is an array of System.Drawing.Point(double, double), with x values at increments of 0.625 and Y values ranging from -3.5 to 3.5.

        <telerik:RadCartesianChart x:Name="uxChart">
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior />
            </telerik:RadCartesianChart.Behaviors>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis x:Name="horizontalAxis"
                                    Minimum="{Binding XAxisMin}"
                                    Maximum="{Binding XAxisMax}"
                                    Title="{Binding XAxisTitle}" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis x:Name="verticalAxis"
                                    Minimum="{Binding YAxisMin}"
                                    Maximum="{Binding YAxisMax}"
                                    Title="{Binding YAxisTitle}" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:ScatterLineSeries ItemsSource="{Binding Data}"
                                           XValueBinding="X"
                                           YValueBinding="Y" />
            </telerik:RadCartesianChart.Series>
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
            </telerik:RadCartesianChart.Grid>
        </telerik:RadCartesianChart>

[Petar Kirov]

Hi Charlie,

This visualization "artifact" is caused by the default rendering setting of PolyLines in WPF (StrokeLineJoin=Miter). You can adjust this property like this:

<telerik:ScatterLineSeries>
    <telerik:ScatterLineSeries.StrokeShapeStyle>
        <Style TargetType="Path">
            <Setter Property="StrokeThickness" Value="2"/>
            <Setter Property="StrokeLineJoin" Value="Round"/>
        </Style>
    </telerik:ScatterLineSeries.StrokeShapeStyle>
</telerik:ScatterLineSeries>

I have attached screenshots that illustrate the different modes. 
 
Regards,
Petar Kirov
Telerik

[Charlie]

When specifying any options for StrokeShapeStyle, all points inthe graph disappear. I am using the following code:

        <telerik:RadCartesianChart x:Name="uxChart">
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior />
            </telerik:RadCartesianChart.Behaviors>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis x:Name="horizontalAxis"
                                    Minimum="{Binding XAxisMin}"
                                    Maximum="{Binding XAxisMax}"
                                    Title="{Binding XAxisTitle}" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis x:Name="verticalAxis"
                                    Minimum="{Binding YAxisMin}"
                                    Maximum="{Binding YAxisMax}"
                                    Title="{Binding YAxisTitle}" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:ScatterLineSeries ItemsSource="{Binding Data}"
                                           XValueBinding="X"
                                           YValueBinding="Y">
                    <telerik:ScatterLineSeries.StrokeShapeStyle>
                        <Style TargetType="Path">
                            <Setter Property="StrokeThickness"
                                    Value="2" />
                            <Setter Property="StrokeLineJoin"
                                    Value="Round" />
                        </Style>
                    </telerik:ScatterLineSeries.StrokeShapeStyle>
                </telerik:ScatterLineSeries>
            </telerik:RadCartesianChart.Series>
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
            </telerik:RadCartesianChart.Grid>
        </telerik:RadCartesianChart>

[Petar Kirov]

Hi Charlie,

The default StrokeShapeStyle contains the default color (Stroke) of the series. By specifying a custom one, you overriding the default and the Path is left without a color. 

You need to either set the Stroke of the Path, or set a chart palette like this:

<telerik:RadCartesianChart x:Name="chart" Palette="Windows8"/>

 

Regards,
Petar Kirov
Telerik