Replacing LineSeries with AreaSeries

[Deepak]

I had a RadCartesianChart control with a LineSeries within, which amtrying to replace with an AreaSeries. And following is the new code I have:

<telerik:RadCartesianChart Name="outputChart" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY">
                    <telerik:CartesianChartGrid.MajorXLineStyle>
                        <Style TargetType="Line">
                            <Setter Property="Shape.Stroke" Value="{StaticResource gridLineColor}" />
                        </Style>
                    </telerik:CartesianChartGrid.MajorXLineStyle>
                    <telerik:CartesianChartGrid.MajorYLineStyle>
                        <Style TargetType="Line">
                            <Setter Property="Shape.Stroke" Value="{StaticResource gridLineColor}" />
                        </Style>
                    </telerik:CartesianChartGrid.MajorYLineStyle>
                </telerik:CartesianChartGrid>
            </telerik:RadCartesianChart.Grid>

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis
                    Name="horizontalAxis"
                    HorizontalAlignment="Center"
                    HorizontalContentAlignment="Center"
                    ElementBrush="LightGray"
                    PlotMode="OnTicks"
                    LabelInterval="2"
                    LabelStyle="{StaticResource XAxisLabelStyle}"
                    MajorStepUnit="Minute"
                    FontSize="12"
                    Foreground="{StaticResource textForeground}"
                    LabelFormat="h:mm tt"
                    LineThickness="0"
                    Minimum="{Binding StartTime}"
                    Maximum="{Binding EndTime}"
                    MajorStep="{Binding HorizontalMajorStep}" />
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis
                    Name="verticalAxis"
                    Title="{x:Static resources:Strings.VerticalAxisTitle}"
                    ElementBrush="LightGray"
                    Minimum="0"
                    Maximum="{Binding VerticalMax}"
                    LineThickness="0"
                    MajorStep="{Binding VerticalMajorStep}" />
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.Series>
                <telerik:AreaSeries
                Name="combinedSeries"
                ItemsSource="{Binding ChartPoints}"
                ValueBinding="Combined"
                CategoryBinding="CalculationTime"
                StrokeThickness="2"
                Stroke="{StaticResource StrokeColor}"
                ClipToPlotArea="False"
                Visibility="{Binding ThroughputVisibility}">
                    <telerik:AreaSeries.AreaShapeStyle>
                        <Style TargetType="Path">
                            <Setter Property="Fill" Value="{StaticResource StrokeColor}" />
                            <Setter Property="Opacity" Value="0.2" />
                        </Style>
                    </telerik:AreaSeries.AreaShapeStyle>
                </telerik:AreaSeries>
            </telerik:RadCartesianChart.Series>

            <telerik:RadCartesianChart.Annotations>
                <telerik:CartesianGridLineAnnotation
                    Name="combinedWarningLevelAnnotation"
                    Axis="{Binding ElementName=verticalAxis}"
                    Value="{Binding CombinedThroughputWarningLevel}"
                    Label="{Binding CombinedThroughputWarningLevel}"
                    Foreground="{StaticResource textForeground}"
                    FontSize="9"
                    Visibility="{Binding CombinedThroughputVisibility}"
                    StrokeThickness="1"
                    Stroke="{StaticResource combinedThroughputColor}" />
            </telerik:RadCartesianChart.Annotations>
        </telerik:RadCartesianChart>

 The vertical bound for the chart is dynamically bound to VerticalMax which is calculated at each time step after determining if any data value being plotted is above the current vertical limit. This logic was working perfectly well with LineSeries and the moment I replaced it with AreaSeries, the graph lines started going outside the vertical limits (i.e below 0 and above vertical max of the chart). There has been no change in the data being fed in whatsoever. Is there anything else I should be doing while using AreaSeries?

[Deepak]

Sorry but I forgot to attach the values being rendered and the output graph. PFA. So the graph is being redrawn every 2 seconds in this instance.

[Martin Ivanov]

Hi Deepak,

Without your implementation I cannot be sure why this happens, However, it seems that the described behavior comes from the Stroke of the area. The stroke is not respected when the area is positioned in the plot area and this is why the stroked part could be clipped or drawn outside of the chart in some cases. For example, the value "5968" is very close to the Maximum of the vertical axis. The area is drawn properly but the stroke goes a bit above the maximum. To resolve this you can remove the Maximum property setter and leave the chart to calculate the maximum automatically. Or you can manually set a bit bigger Maximum.

Regards,
Martin
Telerik by Progress