Silk skin

HtmlChart - Multiple Y-axes

Demo Configurator

Y Axis Crossing Point:
Additional Y Axis Crossing Point:
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Multiple Y-axes 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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Functionality.MultipleYAxes.DefaultCS"  %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>

    <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">
                    <telerik:ColumnSeries Name="Total cases">
                        <TooltipsAppearance Color="White" />
                            <telerik:CategorySeriesItem Y="1000" />
                            <telerik:CategorySeriesItem Y="2000" />
                            <telerik:CategorySeriesItem Y="2500" />
                            <telerik:CategorySeriesItem Y="1750" />
                    <telerik:ColumnSeries AxisName="AdditionalAxis" Name="Outstanding Cases">
                            <FillStyle BackgroundColor="Red" />
                        <TooltipsAppearance Color="White" />
                            <telerik:CategorySeriesItem Y="200" />
                            <telerik:CategorySeriesItem Y="230" />
                            <telerik:CategorySeriesItem Y="170" />
                            <telerik:CategorySeriesItem Y="190" />
                <YAxis Color="#2DABC1" Width="3">
                    <telerik:AxisY Name="AdditionalAxis" Color="Red" Width="3">
                        <telerik:AxisCrossingPoint Value="0" />
                        <telerik:AxisCrossingPoint Value="4" />
                    <LabelsAppearance DataFormatString="Quarter {0}" />
                        <telerik:AxisItem LabelText="1" />
                        <telerik:AxisItem LabelText="2" />
                        <telerik:AxisItem LabelText="3" />
                        <telerik:AxisItem LabelText="4" />
                <Appearance Position="Top" />

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

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
                <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: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">

Find Assistance

Help Us Improve

Was this example helpful?