Telerik UI for Windows Phone by Progress

Area Series

The area series can be SplineAreaSeries and normal AreaSeries which correspond to the SplineSeries and LineSeries respectively. The area series are behave just like the spline and line series but they also allow the area between the curve/lines and the corresponding axis to be colored in an arbitrary way. Below are two examples of spline area series and area series respectively:

CopyXAML
<chart:RadCartesianChart>
   <chart:RadCartesianChart.VerticalAxis>
      <chart:LinearAxis/>
   </chart:RadCartesianChart.VerticalAxis>

   <chart:RadCartesianChart.HorizontalAxis>
      <chart:CategoricalAxis/>
   </chart:RadCartesianChart.HorizontalAxis>

  <chart:AreaSeries Stroke="Orange"
            Fill="Gray">

    <chart:AreaSeries.DataPoints>
      <chartEngine:CategoricalDataPoint Value="20"/>
      <chartEngine:CategoricalDataPoint Value="40"/>
      <chartEngine:CategoricalDataPoint Value="35"/>
      <chartEngine:CategoricalDataPoint Value="40"/>
      <chartEngine:CategoricalDataPoint Value="30"/>
      <chartEngine:CategoricalDataPoint Value="50"/>
    </chart:AreaSeries.DataPoints>
  </chart:AreaSeries>
</chart:RadCartesianChart>

radchart-series-area

CopyXAML
<chart:RadCartesianChart x:Name="chart">
   <chart:RadCartesianChart.VerticalAxis> 
      <chart:LinearAxis/>
   </chart:RadCartesianChart.VerticalAxis>

   <chart:RadCartesianChart.HorizontalAxis> 
      <chart:CategoricalAxis/>
   </chart:RadCartesianChart.HorizontalAxis>

   <chart:SplineAreaSeries Stroke="Orange"
      Fill="Gray">

   <chart:SplineAreaSeries.DataPoints> <chartEngine:CategoricalDataPoint Value="20"/> <chartEngine:CategoricalDataPoint Value="40"/>
       <chartEngine:CategoricalDataPoint Value="35"/>
       <chartEngine:CategoricalDataPoint Value="40"/>
       <chartEngine:CategoricalDataPoint Value="30"/>
       <chartEngine:CategoricalDataPoint Value="50"/> 
   </chart:SplineAreaSeries.DataPoints>
 </chart:RadCartesianChart>

radchart-series-splinearea