HtmlChart - Column Chart

Product Sales Column Chart Settings

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

This example demonstrates a RadHtmlChart 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 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="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">
                            </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?