HtmlChart - Negative Values

Demo Configurator

X Axis Labels Position:
OnAxis
Y Axis Labels Position:
OnAxis
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The RadHtmlChart 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.

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?