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

Multiple Y-axes

  • Demo Configurator
Y Axis Crossing Point:
Additional Y Axis Crossing Point:

Multiple Y-axes in the ASP.NET AJAX Chart are configured as follows:

  • Add the required AxisY definitions in the AdditionalYAxes tag inside PlotArea. They are configured just like the main YAxis. What is new is the axis' Name property - its value is used in the series' AxisName property to specify which axis is used by the current series. This feature is available since the Q3 2012 release.
  • Add the recommended AxisCrossingPoint definitions in the AxisCrossingPoints tag inside XAxis. The Value property of each AxisCrossingPoint definition corresponds to the value at which the respective Y-axis crosses the X-axis. If none AxisCrossingPoint definitions are set, all Y-axes will cross the first point on the X-axis. This feature is available since the Q1 2014 release.

Use the sliders below the chart, in order to adjust the alignment of both Y-axes over the X-axis.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.HtmlChart.Functionality.MultipleYAxes.DefaultVB"  %>

<%@ 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-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="500">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Total cases">
                        <TooltipsAppearance Color="White" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1000" />
                            <telerik:CategorySeriesItem Y="2000" />
                            <telerik:CategorySeriesItem Y="2500" />
                            <telerik:CategorySeriesItem Y="1750" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries AxisName="AdditionalAxis" Name="Outstanding Cases">
                        <Appearance>
                            <FillStyle BackgroundColor="Red" />
                        </Appearance>
                        <TooltipsAppearance Color="White" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="200" />
                            <telerik:CategorySeriesItem Y="230" />
                            <telerik:CategorySeriesItem Y="170" />
                            <telerik:CategorySeriesItem Y="190" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <YAxis Color="#2DABC1" Width="3">
                </YAxis>
                <AdditionalYAxes>
                    <telerik:AxisY Name="AdditionalAxis" Color="Red" Width="3">
                    </telerik:AxisY>
                </AdditionalYAxes>
                <XAxis>
                    <AxisCrossingPoints>
                        <telerik:AxisCrossingPoint Value="0" />
                        <telerik:AxisCrossingPoint Value="4" />
                    </AxisCrossingPoints>
                    <LabelsAppearance DataFormatString="Quarter {0}" />
                    <Items>
                        <telerik:AxisItem LabelText="1" />
                        <telerik:AxisItem LabelText="2" />
                        <telerik:AxisItem LabelText="3" />
                        <telerik:AxisItem LabelText="4" />
                    </Items>
                </XAxis>
            </PlotArea>
            <Legend>
                <Appearance Position="Top" />
            </Legend>
        </telerik:RadHtmlChart>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <span class="label">Y Axis Crossing Point:</span>
                    <qsf:Slider runat="server" ID="SliderYAxis"
                        SelectionStart="0" SelectionEnd="4" AutoPostBack="true" Value="0"
                        ItemType="Tick" LargeChange="1" MinimumValue="0" MaximumValue="4"
                        TrackPosition="TopLeft" EnableServerSideRendering="true">
                    </qsf:Slider>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <span class="label">Additional Y Axis Crossing Point:</span>
                    <qsf:Slider runat="server" ID="SliderAdditionalYAxis"
                        SelectionStart="0" SelectionEnd="4" AutoPostBack="true" Value="4"
                        ItemType="Tick" LargeChange="1" MinimumValue="0" MaximumValue="4"
                        TrackPosition="TopLeft" EnableServerSideRendering="true">
                    </qsf:Slider>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance