Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Marked Zones from Spline series chart

4 Answers 81 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Sumanth
Top achievements
Rank 1
Sumanth asked on 10 Feb 2011, 08:47 AM
Hi,

In my chart I am using chart series type as "Spline" and cart & lines are displaying correctly as per the given data.

Now my requirement is, i want to mark the area between each spline with different color schema. How can i achieve this?

I tried with SplineArea series type but that chart was not displaying as am expected.

I am looking similar chart which you can find in below url
http://childobesityinfo.blogspot.com/2008/09/bmi-for-age-percentile-chart-for-boys.html
Thanks,
Sumanth

4 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 15 Feb 2011, 08:47 AM
Hi Sumanth,

You can use stacked spline charts to achieve the desired behavior. More information on this is available in the following article:

http://www.telerik.com/help/aspnet-ajax/understandingtypesstackedsplinearea.html

I hope this is a suitable option for you.

Best wishes,
Yavor
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Sumanth
Top achievements
Rank 1
answered on 16 Feb 2011, 06:55 AM
Hi Yavor,

StackedSplineArea also doesn't worked for me. Please find below code
<table>
        <tr>
            <td>
                <telerik:RadChart runat="server" ID="RadChart2" Width="700" Skin="LightBlue" Height="800">
                    <Series>
                        <telerik:ChartSeries Name="Series1" Type="Spline">
                            <Items>
                                <telerik:ChartSeriesItem XValue="2" YValue="13.2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="3" YValue="12.5">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="4" YValue="11.9">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="5" YValue="13.6">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="6" YValue="16.7">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="7" YValue="20.5">
                                </telerik:ChartSeriesItem>
                            </Items>
                            <Appearance ShowLabels="false">
                            </Appearance>
                        </telerik:ChartSeries>
                        <telerik:ChartSeries Name="Series2" Type="Spline">
                            <Items>
                                <telerik:ChartSeriesItem XValue="2" YValue="16.2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="3" YValue="14.5">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="4" YValue="15.9">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="5" YValue="19.6">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="6" YValue="22.7">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="7" YValue="24.5">
                                </telerik:ChartSeriesItem>
                            </Items>
                            <Appearance ShowLabels="false">
                            </Appearance>
                        </telerik:ChartSeries>
                        <telerik:ChartSeries Name="Series3" Type="Spline">
                            <Items>
                                <telerik:ChartSeriesItem XValue="2" YValue="19.2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="3" YValue="17.5">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="4" YValue="18.9">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="5" YValue="22.6">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="6" YValue="25.7">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="7" YValue="27.5">
                                </telerik:ChartSeriesItem>
                            </Items>
                            <Appearance ShowLabels="false">
                            </Appearance>
                        </telerik:ChartSeries>
                        <telerik:ChartSeries Name="Series4" Type="Spline">
                            <Items>
                                <telerik:ChartSeriesItem XValue="2" YValue="21.2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="3" YValue="19.5">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="4" YValue="20.9">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="5" YValue="24.6">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="6" YValue="27.7">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="7" YValue="29.5">
                                </telerik:ChartSeriesItem>
                            </Items>
                            <Appearance ShowLabels="false">
                            </Appearance>
                        </telerik:ChartSeries>
                    </Series>
                    <Legend>
                        <Appearance Corners="Round, Round, Round, Round, 6">
                            <ItemTextAppearance TextProperties-Color="62, 117, 154">
                            </ItemTextAppearance>
                            <Border Color="208, 237, 255" />
                        </Appearance>
                    </Legend>
                    <PlotArea>
                        <XAxis LayoutMode="Normal" AutoScale="false" MinValue="2" Step="1" MaxValue="20">
                            <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208">
                                <MajorGridLines Color="153, 187, 208" Width="0" />
                                <TextAppearance TextProperties-Color="72, 124, 160">
                                </TextAppearance>
                            </Appearance>
                            <AxisLabel Visible="true" TextBlock-Text="Age">
                                <Appearance Visible="True">
                                </Appearance>
                                <TextBlock Text="Age">
                                    <Appearance TextProperties-Color="72, 124, 160">
                                    </Appearance>
                                </TextBlock>
                            </AxisLabel>
                            <Items>
                                <telerik:ChartAxisItem Value="2">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="3">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="4">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="5">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="6">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="7">
                                </telerik:ChartAxisItem>
                            </Items>
                        </XAxis>
                        <YAxis AutoScale="false" MinValue="10" MaxValue="36" Step="2">
                            <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208" MinorTick-Color="153, 187, 208">
                                <MajorGridLines Color="153, 187, 208" />
                                <MinorGridLines Color="153, 187, 208" />
                                <TextAppearance TextProperties-Color="72, 124, 160">
                                </TextAppearance>
                            </Appearance>
                            <AxisLabel Visible="true" TextBlock-Text="BMI">
                                <Appearance Visible="True">
                                </Appearance>
                                <TextBlock>
                                    <Appearance TextProperties-Color="72, 124, 160">
                                    </Appearance>
                                </TextBlock>
                            </AxisLabel>
                            <Items>
                                <telerik:ChartAxisItem Value="10">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="12">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="14">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="16">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="18">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="20">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="22">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="24">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="26">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="28">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="30">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="32">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="34">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="36">
                                </telerik:ChartAxisItem>
                            </Items>
                        </YAxis>
                        <Appearance Dimensions-Margins="18%, 23%, 12%, 10%">
                            <FillStyle MainColor="255, 255, 238" SecondColor="Transparent">
                            </FillStyle>
                            <Border Color="153, 187, 208" />
                        </Appearance>
                    </PlotArea>
                    <ChartTitle>
                        <Appearance>
                            <FillStyle>
                            </FillStyle>
                        </Appearance>
                        <TextBlock Text="Spline">
                            <Appearance TextProperties-Color="70, 143, 190">
                            </Appearance>
                        </TextBlock>
                    </ChartTitle>
                </telerik:RadChart>
            </td>
            <td>
                <telerik:RadChart runat="server" ID="RadChart1" Width="700" Skin="LightBlue" Height="800">
                    <Series>
                        <telerik:ChartSeries Name="Series1" Type="StackedSplineArea">
                            <Items>
                                <telerik:ChartSeriesItem XValue="2" YValue="13.2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="3" YValue="12.5">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="4" YValue="11.9">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="5" YValue="13.6">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="6" YValue="16.7">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="7" YValue="20.5">
                                </telerik:ChartSeriesItem>
                            </Items>
                            <Appearance ShowLabels="false">
                            </Appearance>
                        </telerik:ChartSeries>
                        <telerik:ChartSeries Name="Series2" Type="StackedSplineArea">
                            <Items>
                                <telerik:ChartSeriesItem XValue="2" YValue="16.2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="3" YValue="14.5">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="4" YValue="15.9">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="5" YValue="19.6">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="6" YValue="22.7">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="7" YValue="24.5">
                                </telerik:ChartSeriesItem>
                            </Items>
                            <Appearance ShowLabels="false">
                            </Appearance>
                        </telerik:ChartSeries>
                        <telerik:ChartSeries Name="Series3" Type="StackedSplineArea">
                            <Items>
                                <telerik:ChartSeriesItem XValue="2" YValue="19.2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="3" YValue="17.5">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="4" YValue="18.9">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="5" YValue="22.6">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="6" YValue="25.7">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="7" YValue="27.5">
                                </telerik:ChartSeriesItem>
                            </Items>
                            <Appearance ShowLabels="false">
                            </Appearance>
                        </telerik:ChartSeries>
                        <telerik:ChartSeries Name="Series4" Type="StackedSplineArea">
                            <Items>
                                <telerik:ChartSeriesItem XValue="2" YValue="21.2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="3" YValue="19.5">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="4" YValue="20.9">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="5" YValue="24.6">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="6" YValue="27.7">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="7" YValue="29.5">
                                </telerik:ChartSeriesItem>
                            </Items>
                            <Appearance ShowLabels="false">
                            </Appearance>
                        </telerik:ChartSeries>
                    </Series>
                    <Legend>
                        <Appearance Corners="Round, Round, Round, Round, 6">
                            <ItemTextAppearance TextProperties-Color="62, 117, 154">
                            </ItemTextAppearance>
                            <Border Color="208, 237, 255" />
                        </Appearance>
                    </Legend>
                    <PlotArea>
                        <XAxis LayoutMode="Normal" AutoScale="false" MinValue="2" Step="1" MaxValue="20">
                            <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208">
                                <MajorGridLines Color="153, 187, 208" Width="0" />
                                <TextAppearance TextProperties-Color="72, 124, 160">
                                </TextAppearance>
                            </Appearance>
                            <AxisLabel Visible="true" TextBlock-Text="Age">
                                <Appearance Visible="True">
                                </Appearance>
                                <TextBlock Text="Age">
                                    <Appearance TextProperties-Color="72, 124, 160">
                                    </Appearance>
                                </TextBlock>
                            </AxisLabel>
                            <Items>
                                <telerik:ChartAxisItem Value="2">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="3">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="4">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="5">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="6">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="7">
                                </telerik:ChartAxisItem>
                            </Items>
                        </XAxis>
                        <YAxis AutoScale="false" MinValue="10" MaxValue="36" Step="2">
                            <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208" MinorTick-Color="153, 187, 208">
                                <MajorGridLines Color="153, 187, 208" />
                                <MinorGridLines Color="153, 187, 208" />
                                <TextAppearance TextProperties-Color="72, 124, 160">
                                </TextAppearance>
                            </Appearance>
                            <AxisLabel Visible="true" TextBlock-Text="BMI">
                                <Appearance Visible="True">
                                </Appearance>
                                <TextBlock>
                                    <Appearance TextProperties-Color="72, 124, 160">
                                    </Appearance>
                                </TextBlock>
                            </AxisLabel>
                            <Items>
                                <telerik:ChartAxisItem Value="10">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="12">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="14">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="16">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="18">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="20">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="22">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="24">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="26">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="28">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="30">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="32">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="34">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="36">
                                </telerik:ChartAxisItem>
                            </Items>
                        </YAxis>
                        <Appearance Dimensions-Margins="18%, 23%, 12%, 10%">
                            <FillStyle MainColor="255, 255, 238" SecondColor="Transparent">
                            </FillStyle>
                            <Border Color="153, 187, 208" />
                        </Appearance>
                    </PlotArea>
                    <ChartTitle>
                        <Appearance>
                            <FillStyle>
                            </FillStyle>
                        </Appearance>
                        <TextBlock Text="StackedSplineArea">
                            <Appearance TextProperties-Color="70, 143, 190">
                            </Appearance>
                        </TextBlock>
                    </ChartTitle>
                </telerik:RadChart>
            </td>
        </tr>
    </table>

I want to fill with different colors in the areas between searies, area below the series1 and area above series4 

Thanks,
Sumanth
 
0
Accepted
Yavor
Telerik team
answered on 18 Feb 2011, 09:40 AM
Hello Sumanth,

If you would like to mark the area between the splines, you can use an area. The code will look like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    Culture="auto" %>
  
<%@ Register Assembly="System.Web.Entity, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"
    Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        </style>
  
    <script type="text/javascript">
  
          
    </script>
  
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="Manager1">
    </asp:ScriptManager>       
   <telerik:RadChart runat="server" ID="RadChart2" Width="700" Skin="LightBlue" Height="800"> 
                    <Series> 
                      
                     <telerik:ChartSeries Name="Series4" Type="Area"> 
                            <Items> 
                                <telerik:ChartSeriesItem XValue="2" YValue="21.2"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="3" YValue="19.5"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="4" YValue="20.9"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="5" YValue="24.6"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="6" YValue="27.7"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="7" YValue="29.5"> 
                                </telerik:ChartSeriesItem> 
                            </Items> 
                            <Appearance ShowLabels="false"> 
                            </Appearance> 
                        </telerik:ChartSeries>  
                          
                           <telerik:ChartSeries Name="Series3" Type="Area"> 
                            <Items> 
                                <telerik:ChartSeriesItem XValue="2" YValue="19.2"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="3" YValue="17.5"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="4" YValue="18.9"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="5" YValue="22.6"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="6" YValue="25.7"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="7" YValue="27.5"> 
                                </telerik:ChartSeriesItem> 
                            </Items> 
                            <Appearance ShowLabels="false"> 
                            </Appearance> 
                        </telerik:ChartSeries> 
                         
                        <telerik:ChartSeries Name="Series2" Type="Area"> 
                            <Items> 
                                <telerik:ChartSeriesItem XValue="2" YValue="16.2"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="3" YValue="14.5"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="4" YValue="15.9"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="5" YValue="19.6"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="6" YValue="22.7"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="7" YValue="24.5"> 
                                </telerik:ChartSeriesItem> 
                            </Items> 
                            <Appearance ShowLabels="false"> 
                            </Appearance> 
                        </telerik:ChartSeries> 
                         <telerik:ChartSeries Name="Series1" Type="Area"> 
                            <Items> 
                                <telerik:ChartSeriesItem XValue="2" YValue="13.2"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="3" YValue="12.5"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="4" YValue="11.9"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="5" YValue="13.6"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="6" YValue="16.7"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="7" YValue="20.5"> 
                                </telerik:ChartSeriesItem> 
                            </Items> 
                            <Appearance ShowLabels="false"> 
                            </Appearance> 
                        </telerik:ChartSeries> 
                       
                         
                    </Series> 
                    <Legend> 
                        <Appearance Corners="Round, Round, Round, Round, 6"> 
                            <ItemTextAppearance TextProperties-Color="62, 117, 154"> 
                            </ItemTextAppearance> 
                            <Border Color="208, 237, 255" /> 
                        </Appearance> 
                    </Legend> 
                    <PlotArea> 
                        <XAxis LayoutMode="Normal" AutoScale="false" MinValue="2" Step="1" MaxValue="20"> 
                            <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208"> 
                                <MajorGridLines Color="153, 187, 208" Width="0" /> 
                                <TextAppearance TextProperties-Color="72, 124, 160"> 
                                </TextAppearance> 
                            </Appearance> 
                            <AxisLabel Visible="true" TextBlock-Text="Age"> 
                                <Appearance Visible="True"> 
                                </Appearance> 
                                <TextBlock Text="Age"> 
                                    <Appearance TextProperties-Color="72, 124, 160"> 
                                    </Appearance> 
                                </TextBlock> 
                            </AxisLabel> 
                            <Items> 
                                <telerik:ChartAxisItem Value="2"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="3"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="4"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="5"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="6"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="7"> 
                                </telerik:ChartAxisItem> 
                            </Items> 
                        </XAxis> 
                        <YAxis AutoScale="false" MinValue="10" MaxValue="36" Step="2"> 
                            <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208" MinorTick-Color="153, 187, 208"> 
                                <MajorGridLines Color="153, 187, 208" /> 
                                <MinorGridLines Color="153, 187, 208" /> 
                                <TextAppearance TextProperties-Color="72, 124, 160"> 
                                </TextAppearance> 
                            </Appearance> 
                            <AxisLabel Visible="true" TextBlock-Text="BMI"> 
                                <Appearance Visible="True"> 
                                </Appearance> 
                                <TextBlock> 
                                    <Appearance TextProperties-Color="72, 124, 160"> 
                                    </Appearance> 
                                </TextBlock> 
                            </AxisLabel> 
                            <Items> 
                                <telerik:ChartAxisItem Value="10"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="12"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="14"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="16"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="18"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="20"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="22"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="24"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="26"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="28"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="30"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="32"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="34"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="36"> 
                                </telerik:ChartAxisItem> 
                            </Items> 
                        </YAxis> 
                        <Appearance Dimensions-Margins="18%, 23%, 12%, 10%"> 
                             
                        </Appearance> 
                    </PlotArea> 
                    <ChartTitle> 
                        <Appearance> 
                            <FillStyle> 
                            </FillStyle> 
                        </Appearance> 
                        <TextBlock Text="Spline"> 
                            <Appearance TextProperties-Color="70, 143, 190"> 
                            </Appearance> 
                        </TextBlock> 
                    </ChartTitle> 
                </telerik:RadChart> 
            </td> 
            <td> 
                <telerik:RadChart runat="server" ID="RadChart1" Width="700" Skin="LightBlue" Height="800"> 
                    <Series> 
                        <telerik:ChartSeries Name="Series1" Type="StackedSplineArea"> 
                            <Items> 
                                <telerik:ChartSeriesItem XValue="2" YValue="13.2"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="3" YValue="12.5"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="4" YValue="11.9"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="5" YValue="13.6"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="6" YValue="16.7"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="7" YValue="20.5"> 
                                </telerik:ChartSeriesItem> 
                            </Items> 
                            <Appearance ShowLabels="false"> 
                            </Appearance> 
                        </telerik:ChartSeries> 
                        <telerik:ChartSeries Name="Series2" Type="StackedSplineArea"> 
                            <Items> 
                                <telerik:ChartSeriesItem XValue="2" YValue="16.2"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="3" YValue="14.5"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="4" YValue="15.9"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="5" YValue="19.6"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="6" YValue="22.7"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="7" YValue="24.5"> 
                                </telerik:ChartSeriesItem> 
                            </Items> 
                            <Appearance ShowLabels="false"> 
                            </Appearance> 
                        </telerik:ChartSeries> 
                        <telerik:ChartSeries Name="Series3" Type="StackedSplineArea"> 
                            <Items> 
                                <telerik:ChartSeriesItem XValue="2" YValue="19.2"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="3" YValue="17.5"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="4" YValue="18.9"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="5" YValue="22.6"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="6" YValue="25.7"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="7" YValue="27.5"> 
                                </telerik:ChartSeriesItem> 
                            </Items> 
                            <Appearance ShowLabels="false"> 
                            </Appearance> 
                        </telerik:ChartSeries> 
                        <telerik:ChartSeries Name="Series4" Type="StackedSplineArea"> 
                            <Items> 
                                <telerik:ChartSeriesItem XValue="2" YValue="21.2"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="3" YValue="19.5"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="4" YValue="20.9"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="5" YValue="24.6"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="6" YValue="27.7"> 
                                </telerik:ChartSeriesItem> 
                                <telerik:ChartSeriesItem XValue="7" YValue="29.5"> 
                                </telerik:ChartSeriesItem> 
                            </Items> 
                            <Appearance ShowLabels="false"> 
                            </Appearance> 
                        </telerik:ChartSeries> 
                    </Series> 
                    <Legend> 
                        <Appearance Corners="Round, Round, Round, Round, 6"> 
                            <ItemTextAppearance TextProperties-Color="62, 117, 154"> 
                            </ItemTextAppearance> 
                            <Border Color="208, 237, 255" /> 
                        </Appearance> 
                    </Legend> 
                    <PlotArea> 
                        <XAxis LayoutMode="Normal" AutoScale="false" MinValue="2" Step="1" MaxValue="20"> 
                            <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208"> 
                                <MajorGridLines Color="153, 187, 208" Width="0" /> 
                                <TextAppearance TextProperties-Color="72, 124, 160"> 
                                </TextAppearance> 
                            </Appearance> 
                            <AxisLabel Visible="true" TextBlock-Text="Age"> 
                                <Appearance Visible="True"> 
                                </Appearance> 
                                <TextBlock Text="Age"> 
                                    <Appearance TextProperties-Color="72, 124, 160"> 
                                    </Appearance> 
                                </TextBlock> 
                            </AxisLabel> 
                            <Items> 
                                <telerik:ChartAxisItem Value="2"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="3"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="4"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="5"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="6"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="7"> 
                                </telerik:ChartAxisItem> 
                            </Items> 
                        </XAxis> 
                        <YAxis AutoScale="false" MinValue="10" MaxValue="36" Step="2"> 
                            <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208" MinorTick-Color="153, 187, 208"> 
                                <MajorGridLines Color="153, 187, 208" /> 
                                <MinorGridLines Color="153, 187, 208" /> 
                                <TextAppearance TextProperties-Color="72, 124, 160"> 
                                </TextAppearance> 
                            </Appearance> 
                            <AxisLabel Visible="true" TextBlock-Text="BMI"> 
                                <Appearance Visible="True"> 
                                </Appearance> 
                                <TextBlock> 
                                    <Appearance TextProperties-Color="72, 124, 160"> 
                                    </Appearance> 
                                </TextBlock> 
                            </AxisLabel> 
                            <Items> 
                                <telerik:ChartAxisItem Value="10"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="12"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="14"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="16"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="18"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="20"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="22"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="24"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="26"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="28"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="30"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="32"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="34"> 
                                </telerik:ChartAxisItem> 
                                <telerik:ChartAxisItem Value="36"> 
                                </telerik:ChartAxisItem> 
                            </Items> 
                        </YAxis> 
                        <Appearance Dimensions-Margins="18%, 23%, 12%, 10%"> 
                            <FillStyle MainColor="255, 255, 238" SecondColor="Transparent"> 
                            </FillStyle> 
                            <Border Color="153, 187, 208" /> 
                        </Appearance> 
                    </PlotArea> 
                    <ChartTitle> 
                        <Appearance> 
                            <FillStyle> 
                            </FillStyle> 
                        </Appearance> 
                        <TextBlock Text="StackedSplineArea"> 
                            <Appearance TextProperties-Color="70, 143, 190"> 
                            </Appearance> 
                        </TextBlock> 
                    </ChartTitle> 
                </telerik:RadChart> 
  
    </form>
</body>
</html>

I hope this gets you started properly.

Kind regards,
Yavor
the Telerik team
Vote for Telerik products at the Great Indian Developer Awards
0
Sumanth
Top achievements
Rank 1
answered on 18 Feb 2011, 01:26 PM
Hi Yavor,

Thanks, your code perfectly worked for me

Thanks,
Sumanth
Tags
Chart (Obsolete)
Asked by
Sumanth
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Sumanth
Top achievements
Rank 1
Share this question
or