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

Negative Values

  • Demo Configurator
X Axis Labels Position:
OnAxis
Y Axis Labels Position:
OnAxis

The ASP.NET AJAX Chart can handle negative values automatically. This functionality requires that either the axis values are set accordingly to accommodate the data range, or their configuration is left to the control itself without setting any properties for the axes. Negative values are meaningful in the context of all series types except for PieSeries, DonutSeries and FunnelSeries.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.HtmlChart.Functionality.NegativeValues.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-containers" runat="server" id="chartsContainer">
        <div class="demo-container size-narrow">
            <telerik:RadHtmlChart runat="server" ID="BarChart" Height="400px" Width="500px">
                <Legend>
                    <Appearance Visible="false">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <XAxis>
                        <Items>
                            <telerik:AxisItem LabelText="1"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="2"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="3"></telerik:AxisItem>
                        </Items>
                    </XAxis>
                    <Series>
                        <telerik:BarSeries>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="25"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="-12"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="39"></telerik:CategorySeriesItem>
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:BarSeries>
                        <telerik:BarSeries>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="-15"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="38"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="-11"></telerik:CategorySeriesItem>
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:BarSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
        </div>

        <div class="demo-container size-narrow">
            <telerik:RadHtmlChart runat="server" ID="ScatterLineChart" Height="400px" Width="500px">
                <Legend>
                    <Appearance Visible="false">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Series>
                        <telerik:ScatterLineSeries>
                            <SeriesItems>
                                <telerik:ScatterSeriesItem X="-27" Y="35"></telerik:ScatterSeriesItem>
                                <telerik:ScatterSeriesItem X="14" Y="2"></telerik:ScatterSeriesItem>
                                <telerik:ScatterSeriesItem X="50" Y="39"></telerik:ScatterSeriesItem>
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:ScatterLineSeries>
                        <telerik:ScatterLineSeries>
                            <SeriesItems>
                                <telerik:ScatterSeriesItem X="-33" Y="-15"></telerik:ScatterSeriesItem>
                                <telerik:ScatterSeriesItem X="-5" Y="48"></telerik:ScatterSeriesItem>
                                <telerik:ScatterSeriesItem X="64" Y="-42"></telerik:ScatterSeriesItem>
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:ScatterLineSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
        </div>
    </div>

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="chartsContainer" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <span class="label">X Axis Labels Position:</span>
                    <qsf:DropDownList runat="server" ID="XAxisLabelsPosition" AutoPostBack="true"></qsf:DropDownList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <span class="label">Y Axis Labels Position:</span>
                    <qsf:DropDownList runat="server" ID="YAxisLabelsPosition" AutoPostBack="true"></qsf:DropDownList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance