Marked Zones from Spline series chart

Thread is closed for posting
5 posts, 1 answers
  1. Sumanth
    Sumanth avatar
    27 posts
    Member since:
    Sep 2010

    Posted 10 Feb 2011 Link to this post

    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
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 15 Feb 2011 Link to this post

    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.
  3. Sumanth
    Sumanth avatar
    27 posts
    Member since:
    Sep 2010

    Posted 16 Feb 2011 Link to this post

    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
     
  4. Answer
    Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 18 Feb 2011 Link to this post

    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
  5. Sumanth
    Sumanth avatar
    27 posts
    Member since:
    Sep 2010

    Posted 18 Feb 2011 Link to this post

    Hi Yavor,

    Thanks, your code perfectly worked for me

    Thanks,
    Sumanth
Back to Top