HtmlChart - Bar Chart

Revenue Bar Chart Settings

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates a RadHtmlChart control, 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 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-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">
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="ChartSpacing" Value="0.4" Label="Spacing" Size="Medium" AutoPostBack="true"></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>

Find Assistance

Help Us Improve

Was this example helpful?