HtmlChart - Visual Templates

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

Since Q2 2015 RadHtmlChart 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 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="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>

Find Assistance

Help Us Improve

Was this example helpful?