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

Pyramid Chart

  • Demo Configurator
Chart configuration
  • Segment spacing:
Labels configuration
  • Label color
    Pick Color(Current Color is blank)
    Tooltip color
    Pick Color(Current Color is blank)

The demo demonstrates the PyramidSeries in the ASP.NET AJAX Chart, which displays data in progressively increasing proportions, organized in segments. The size of each segment is determined by the value of the corresponding series item.

The configuration panel exposes the meaningful properties in the context of a PyramidSeries. You can manually customize it and see how setting each of the properties affects the control.

Related Resources

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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-containers">
        <div class="demo-container">
            <telerik:RadHtmlChart runat="server" ID="PyramidChart" Width="420" Height="320">
                <PlotArea>
                    <Series>
                        <telerik:PyramidSeries DynamicHeightEnabled="true" SegmentSpacing="0" NeckRatio="30">
                            <SeriesItems>
                                <telerik:PyramidSeriesItem Y="3442" BackgroundColor="#aece4f" Name="Visited the website" />
                                <telerik:PyramidSeriesItem Y="1519" BackgroundColor="#39946f" Name="Watched the demos" />
                                <telerik:PyramidSeriesItem Y="1131" BackgroundColor="#e7d065" Name="Downloaded a trial" />
                                <telerik:PyramidSeriesItem Y="811" BackgroundColor="#8a65a5" Name="Purchased a license" />
                            </SeriesItems>
                            <LabelsAppearance Align="Center" Position="Center" Color="Black">
                                <TextStyle FontSize="20px" />
                            </LabelsAppearance>
                            <TooltipsAppearance>
                                <ClientTemplate>#= category #</ClientTemplate>
                            </TooltipsAppearance>
                        </telerik:PyramidSeries>
                    </Series>
                </PlotArea>
                <Legend>
                    <Appearance Visible="true"></Appearance>
                </Legend>
            </telerik:RadHtmlChart>
        </div>
    </div>
    <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="PyramidChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Chart configuration" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" AutoPostBack="true" ID="CheckBoxDynamicHeight" Text="Dynamic Height" Checked="true" OnCheckedChanged="CheckBoxDynamicHeight_CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <strong>Segment spacing:</strong>
                            <qsf:Slider runat="server" ID="SliderSegmentSpacing" MinimumValue="0" MaximumValue="30" AutoPostBack="true" OnValueChanged="SliderSegmentSpacing_ValueChanged"></qsf:Slider>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Labels configuration" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" AutoPostBack="true" ID="CheckBoxEnableLabels" Text="Enable/Disable labels" Checked="true" OnCheckedChanged="CheckBoxEnableLabels_CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxLabelsPosition" Label="Labels Position" OnSelectedIndexChanged="ComboBoxLabelsPosition_SelectedIndexChanged"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxLabelsAlignment" Label="Labels Alignment" OnSelectedIndexChanged="ComboBoxLabelsAlignment_SelectedIndexChanged"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="ColorPickerLabels" AutoPostBack="true" Label="Label color" CssClass="fb-sized" OnColorChanged="ColorPickerLabels_ColorChanged" />
                            <qsf:ColorPicker runat="server" ID="ColorPickerTooltips" AutoPostBack="true" Label="Tooltip color" CssClass="fb-sized" OnColorChanged="ColorPickerTooltips_ColorChanged" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance