New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Mixed Chart Series

You can add more than one type of series in an ASP.NET AJAX Chart control.

  • LineSeries and BarSeries or LineSeries and ColumnSeries. The LineSeries, BarSeries and ColumnSeries use an X-axis, based on categories, which allows such series combination. See the first two examples.
  • ScatterSeries and ScatterLineSeries. These series has a numeric x-axis so you can add them both in a single RadHtmlChart, which is demonstrated in the third example.

In the fourth chart you can examine a PieSeries. This type of series does not use axes thus you cannot combine it with another series.

You can also combine the following set of series:

  • RadarAreaSeries, RadarColumnSeries and RadarLineSeries. The series uses a common radar plot area, so they can present on a common chart.
  • PolarAreaSeries, PolarLineSeries and PolarScatterSeries . The series uses a common polar plot area, so they can present on a common chart.
  • DefaultCS.aspx
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-narrow">
            <telerik:RadHtmlChart runat="server" ID="ChartWithBarsAndLineSeries" Width="500px" Height="400px">
                <ChartTitle Text="Chart with Line and Bar series">
                </ChartTitle>
                <PlotArea>
                    <Series>
                        <telerik:BarSeries>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="12" />
                                <telerik:CategorySeriesItem Y="34" />
                                <telerik:CategorySeriesItem Y="20" />
                                <telerik:CategorySeriesItem Y="40" />
                                <telerik:CategorySeriesItem Y="5" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:BarSeries>
                        <telerik:LineSeries>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="45" />
                                <telerik:CategorySeriesItem Y="23" />
                                <telerik:CategorySeriesItem Y="12" />
                                <telerik:CategorySeriesItem Y="54" />
                                <telerik:CategorySeriesItem Y="71" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:LineSeries>
                    </Series>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false" />
                </Legend>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container size-narrow">
            <telerik:RadHtmlChart runat="server" ID="ChartWithColumnsAndLineSeries" Width="500px" Height="400px">
                <ChartTitle Text="Chart with Line and Column series">
                </ChartTitle>
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="34" />
                                <telerik:CategorySeriesItem Y="76" />
                                <telerik:CategorySeriesItem Y="23" />
                                <telerik:CategorySeriesItem Y="15" />
                                <telerik:CategorySeriesItem Y="84" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:ColumnSeries>
                        <telerik:LineSeries>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="76" />
                                <telerik:CategorySeriesItem Y="12" />
                                <telerik:CategorySeriesItem Y="23" />
                                <telerik:CategorySeriesItem Y="92" />
                                <telerik:CategorySeriesItem Y="54" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:LineSeries>
                    </Series>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false" />
                </Legend>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container size-narrow">
            <telerik:RadHtmlChart runat="server" ID="ChartWithScatterSeries" Height="400px" Width="500px">
                <ChartTitle Text="Chart with Scatter and ScatterLine series">
                </ChartTitle>
                <PlotArea>
                    <Series>
                        <telerik:ScatterSeries>
                            <SeriesItems>
                                <telerik:ScatterSeriesItem X="15" Y="26" />
                                <telerik:ScatterSeriesItem X="31" Y="8" />
                                <telerik:ScatterSeriesItem X="74" Y="62" />
                                <telerik:ScatterSeriesItem X="47" Y="35" />
                                <telerik:ScatterSeriesItem X="95" Y="85" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:ScatterSeries>
                        <telerik:ScatterLineSeries>
                            <SeriesItems>
                                <telerik:ScatterSeriesItem X="10" Y="12" />
                                <telerik:ScatterSeriesItem X="25" Y="13" />
                                <telerik:ScatterSeriesItem X="40" Y="16" />
                                <telerik:ScatterSeriesItem X="64" Y="50" />
                                <telerik:ScatterSeriesItem X="90" Y="90" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:ScatterLineSeries>
                    </Series>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false" />
                </Legend>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container size-narrow">
            <telerik:RadHtmlChart runat="server" ID="ChartWithPieSeries" Height="400px" Width="500px">
                <ChartTitle Text="Chart with Pie series">
                </ChartTitle>
                <PlotArea>
                    <Series>
                        <telerik:PieSeries>
                            <SeriesItems>
                                <telerik:PieSeriesItem Y="12" Exploded="true" />
                                <telerik:PieSeriesItem Y="38" Exploded="false" />
                                <telerik:PieSeriesItem Y="35" Exploded="false" />
                                <telerik:PieSeriesItem Y="10" Exploded="false" />
                                <telerik:PieSeriesItem Y="5" Exploded="false" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:PieSeries>
                    </Series>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false" />
                </Legend>
            </telerik:RadHtmlChart>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance