HtmlChart - Negative Values

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
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ 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">
        <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>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?