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

Chart Series Patterns

The Telerik UI for ASP.NET AJAX Chart allows you to configure patterns for the series in order to display a visual differentiation between them.

This demo shows the different patterns supported by the Chart, and how to configure them.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="HtmlChart_Examples_Appearance_Patterns_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 no-bg">
        <telerik:RadHtmlChart runat="server" ID="ColumnChart" Width="800" BackColor="White">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries>
                        <PatternAppearance Type="VerticalStripes" Color="White" Background="Blue" Width="1.2" Gap="12" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="33" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries>
                        <PatternAppearance Type="Crosshatch" Color="White" Background="#9933ff" Width="1.2" Gap="12" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="19" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries>
                        <PatternAppearance Type="DiagonalStripes" Color="White" Background="#ff66ff" Width="1.2" Gap="12" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="28" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries>
                        <PatternAppearance Type="Grid" Color="Red" Background="White" Size="12" Gap="1.2" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="33" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries>
                        <PatternAppearance Type="Dots" Color="#009900" Background="#ffff99" Radius="7.2" Gap="3.6" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="26" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance