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. To use the Patterns, set the RenderAs property of the Chart to Canvas.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="HtmlChart_Examples_Appearance_Patterns_DefaultVB"  %>

<!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" RenderAs="Canvas" 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