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

Bar Chart

  • Revenue Bar Chart Settings

This example demonstrates an ASP NET AJAX Chart, configured as a Bar Chart (it uses BarSeries). The Bar Chart type for ASP.NET visualizes the data as horizontal bars and it's very similar to the Column Chart. The height of each horizontal bar varies according to its value. ASP.NET Bar Charting is helpful when you need to show a comparison between several data sets. With RadHtmlChart you have many options that enable you to change the appearance of your bar chart and fully customize it.

The distance between the series items and the series categories can be configured via the properties Gap and Spacing of the series since the Q1 2014 release.

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

<!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="BarChart" Width="800" Height="500" Transitions="true" Skin="Silk">
            <PlotArea>
                <Series>
                    <telerik:BarSeries Name="Quarter 1" Stacked="false" Gap="1.5" Spacing="0.4">
                        <Appearance>
                            <FillStyle BackgroundColor="#c5d291"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="${0}" Position="Center">
                        </LabelsAppearance>
                        <TooltipsAppearance BackgroundColor="#c5d291" DataFormatString="${0}" Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="315000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="495000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="690000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:BarSeries>
                    <telerik:BarSeries Name="Quarter 2">
                        <Appearance>
                            <FillStyle BackgroundColor="#92b622"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="${0}" Position="Center"></LabelsAppearance>
                        <TooltipsAppearance BackgroundColor="#92b622" DataFormatString="${0}" Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="360000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="540000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="735000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:BarSeries>
                    <telerik:BarSeries Name="Quarter 3">
                        <Appearance>
                            <FillStyle BackgroundColor="#729021"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="${0}" Position="Center"></LabelsAppearance>
                        <TooltipsAppearance BackgroundColor="#729021" DataFormatString="${0}" Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="405000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="600000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="780000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:BarSeries>
                </Series>
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false">
                    <Items>
                        <telerik:AxisItem LabelText="2003"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2004"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2005"></telerik:AxisItem>
                    </Items>
                    <LabelsAppearance DataFormatString="Year {0}" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Years"></TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
                    MinorTickType="None" Reversed="false">
                    <LabelsAppearance DataFormatString="${0}" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Sum"></TitleAppearance>
                </YAxis>
            </PlotArea>
            <Appearance>
                <FillStyle BackgroundColor="Transparent"></FillStyle>
            </Appearance>
            <ChartTitle Text="Revenue">
                <Appearance Align="Center" BackgroundColor="Transparent" Position="Top"></Appearance>
            </ChartTitle>
            <Legend>
                <Appearance BackgroundColor="Transparent" Position="Bottom"></Appearance>
            </Legend>
        </telerik:RadHtmlChart>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="BarChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Revenue Bar Chart Settings">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="LabelsPosition" Label="Labels Position" AutoPostBack="true"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="ChartGap" Label="Gap" Value="1.5" Size="Medium" AutoPostBack="true" MinValue="-1" MaxValue="5" IncrementSettings-Step="0.2">
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="ChartSpacing" Value="0.4" Label="Spacing" Size="Medium" AutoPostBack="true" MinValue="-1" MaxValue="5" IncrementSettings-Step="0.2"></qsf:NumericTextBox>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="IsStacked" runat="server" AutoPostBack="true"></asp:CheckBox><label for="<%=IsStacked.ClientID %>">Stacked</label></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance