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

Using Client Templates in Legend and Axes Labels

This article discusses the client templates for Legend items and Axes labels exposed in RadHtmlChart.

The features listed here are available as of R2 2016.

You can quickly navigate through the sections in this article:

  1. Client Templates for Legend Items
  2. Client Templates for Axes Labels

Client Templates for Legend Items

The client template for the Legend items can be controlled by using the ClientTemplate property, exposed in the LabelsAppearance property (Example 1).

The values that can be resolved and used in the client templates are:

  • text - the text the legend item.
  • series - the data series.
  • value - the point value. (only for donut and pie charts)
  • percentage - the point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.

More details are avilable in Kendo documentation—legend.labels.template.

Figure 1: Result from the code in Example 1.

Example 1: Using client templates for the Legend items.

<telerik:RadHtmlChart runat="server" ID="BarChart1" Width="500px" Height="300px">
    <PlotArea>
        <Series>
            <telerik:BarSeries Name="Product A">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="315000" />
                    <telerik:CategorySeriesItem Y="495000" />
                    <telerik:CategorySeriesItem Y="690000" />
                </SeriesItems>
            </telerik:BarSeries>
            <telerik:BarSeries Name="Product B">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="360000" />
                    <telerik:CategorySeriesItem Y="540000" />
                    <telerik:CategorySeriesItem Y="735000" />
                </SeriesItems>
            </telerik:BarSeries>
        </Series>
    </PlotArea>
    <Legend>
        <Appearance Position="Bottom" >
            <ClientTemplate>
                #= text # 
                # var values = []#
                # for (var i = 0; i < series.data.length; i++) {  
                   values.push(series.data[i].value);
                 } #
                \n
                Max: #= Math.max(...values) #
            </ClientTemplate>
        </Appearance>
    </Legend>
</telerik:RadHtmlChart>

Client Templates for Axes Labels

The client template for the axes' labels can be controlled by using the ClientTemplate property, exposed in the LabelsAppearance property (Example 2).

The value that can be resolved and used in the client templates is:

  • value - the text of the axis' label.

More details are available in the Kendo documentation—valueAxis.labels.template.

Figure 2: Result from the code in Example 2.

Example 2: Using client templates for the Legend items.

<telerik:RadHtmlChart runat="server" ID="BarChart1" Width="500px" Height="300px">
    <PlotArea>
        <Series>
            <telerik:BarSeries Name="Product A">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="315000" />
                    <telerik:CategorySeriesItem Y="495000" />
                    <telerik:CategorySeriesItem Y="690000" />
                </SeriesItems>
            </telerik:BarSeries>
            <telerik:BarSeries Name="Product B">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="360000" />
                    <telerik:CategorySeriesItem Y="540000" />
                    <telerik:CategorySeriesItem Y="735000" />
                </SeriesItems>
            </telerik:BarSeries>
        </Series>
        <YAxis>
            <TitleAppearance Text="Quantity (x1000)" />
            <LabelsAppearance>
                <ClientTemplate>
                    #= value / 1000 #
                </ClientTemplate>
            </LabelsAppearance>
        </YAxis>
    </PlotArea>     
</telerik:RadHtmlChart>

See Also

In this article