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

Visual Templates

Since Q2 2015 the ASP.NET AJAX Chart offers the ability to implement custom visualization of legend items, axis titles, labels, markers and series by utilizing the Kendo Drawing API. This is done by setting the corresponding item Visual property to a JavaScript function name. Various context information is available through the function argument fields. Such are rect (the kendo.geometry.Rect that defines where the visual should be rendered), createVisual (a function that can be used to get the default visual) and options (different options depending on the item type).

  • DefaultCS.aspx
  • scripts.js
<%@ Page Language="C#"  %>

<%@ 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-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800px" Height="400px">
            <ClientEvents OnLoad="telerikDemo.onChartLoad" />
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Product 1">
                        <Appearance Visual="telerikDemo.columnVisual"></Appearance>
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <TooltipsAppearance DataFormatString="{0:c}"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="101022" />
                            <telerik:CategorySeriesItem Y="135005" />
                            <telerik:CategorySeriesItem Y="180004" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:LineSeries Name="Target">
                        <LineAppearance Width="0" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <TooltipsAppearance DataFormatString="{0:c}"></TooltipsAppearance>
                        <MarkersAppearance Visual="telerikDemo.markersVisual" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="90000" />
                            <telerik:CategorySeriesItem Y="125000" />
                            <telerik:CategorySeriesItem Y="145000" />
                        </SeriesItems>
                    </telerik:LineSeries>
                </Series>
                <YAxis Name="value" Step="40000">
                    <LabelsAppearance DataFormatString="{0:c}" />
                </YAxis>
                <XAxis Name="category">
                    <LabelsAppearance>
                        <TextStyle Margin="10 0 0 0" />
                    </LabelsAppearance>
                    <Items>
                        <telerik:AxisItem LabelText="Q1" />
                        <telerik:AxisItem LabelText="Q2" />
                        <telerik:AxisItem LabelText="Q3" />
                    </Items>
                </XAxis>
            </PlotArea>
            <ChartTitle Text="Product sales for 2014">
            </ChartTitle>
            <Legend>
                <Appearance Position="Bottom" />
                <Item Visual="telerikDemo.legendItemVisual" />
            </Legend>
        </telerik:RadHtmlChart>
    </div>
    <script type="text/javascript" src="scripts.js"></script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance