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

Column Chart

  • Product Sales Column Chart Settings

This example demonstrates an ASP.NET AJAX Chart control, configured as a Column Chart (it uses ColumnSeries). The Column Chart type for ASP.NET visualizes the data as vertical bars and it's very similar to the Bar Chart. The height of each vertical bar varies according to its value. ASP.NET Column 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 column 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.ColumnChart.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="ColumnChart" Width="800" Height="500" Transitions="true" Skin="Silk">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Wooden Table" Stacked="false" Gap="1.5" Spacing="0.4">
                        <Appearance>
                            <FillStyle BackgroundColor="#d5a2bb"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="{0} sales" Position="OutsideEnd"></LabelsAppearance>
                        <TooltipsAppearance DataFormatString="{0} sales" Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="25000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="39000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Lounge">
                        <Appearance>
                            <FillStyle BackgroundColor="#850071"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="{0} sales" Position="OutsideEnd"></LabelsAppearance>
                        <TooltipsAppearance DataFormatString="{0} sales" Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="23000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="10000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Grey Sofa">
                        <Appearance>
                            <FillStyle BackgroundColor="#620055"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="{0} sales" Position="OutsideEnd"></LabelsAppearance>
                        <TooltipsAppearance DataFormatString="{0} sales" Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="35000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="10000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="20000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false">
                    <Items>
                        <telerik:AxisItem LabelText="1"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="3"></telerik:AxisItem>
                    </Items>
                    <LabelsAppearance DataFormatString="Q{0}" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Quarters">
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
                    MinorTickType="None" Reversed="false">
                    <LabelsAppearance DataFormatString="{0} sales" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Sales">
                    </TitleAppearance>
                </YAxis>
            </PlotArea>
            <Appearance>
                <FillStyle BackgroundColor="Transparent"></FillStyle>
            </Appearance>
            <ChartTitle Text="Product sales for 2011">
                <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="ColumnChart" 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="Product Sales Column 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