Add Title to RadHtmlChart Legend

RELATED TO:

AUTHOR: Veselina Raykova

DATE POSTED: October 03, 2018

DESCRIPTION

In some scenarios it is useful to have a title specific to the Series names listed in the RadHtmlChart Legend. You can add such by implementing a Visual Template for the chart’s legend, drawing some additional elements before the first series utilizing the Kendo UI Drawing API.

chart-legend-title

SOLUTION

As the Legend template of the Chart is called for each legend item, we will add the title as a part to the first item (or before it, to be precise). In order to cancel the default show/hide series functionality of the legend items, we will also need to prevent the click and hover logic of the added element. Below are the main steps we will go through in order to achieve the target result:

  1. Implement a Visual Template for RadHtmlChart’s Legend, and draw (and style) the additional title element by using the Kendo UI Drawing API:
  2. Attach handlers to the client-side LegendItemClick and LegendItemHover events of the chart to prevent their default behavior when the added title is clicked/hovered

You can see the implementation of the above steps below, as well to directly test the result of applying the same code to a Kendo Chart widget here: https://dojo.telerik.com/uKIGiNEx

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800px" Height="400px">
    <ClientEvents OnLegendItemClick="legendItemClickOrHover" OnLegendItemHover="legendItemClickOrHover" />
    <Legend>
        <Appearance Position="right" />
        <Item Visual="legendVisual" />
    </Legend>
    <PlotArea>
        ..
    </PlotArea>
</telerik:RadHtmlChart>
function legendVisual(e) {
    var title = e.series.index == 0 ? "Legend Title Here" : " "; //there has to be whitespace so it gets rendered
 
    // Define the target dimensions for the legend item
    var rect = new kendo.geometry.Rect([0, 200], [100, 50]);
 
    var layout = new kendo.drawing.Layout(rect, {
        spacing: 5,
        alignItems: "left"
    });
 
    var innerRect = new kendo.geometry.Rect([0, 200], [100, 50]);
    var innerLayout = new kendo.drawing.Layout(innerRect, {
        spacing: 5,
        orientation: "vertical"
    });
 
    //Position and style the title in the prefered way
    var txt = new kendo.drawing.Text(title, [20, -30], {
        font: "18px sans-serif"
    });
 
    //add the legend title to the legend item
    innerLayout.append(txt);
 
    // This will give us the default box + text
    innerLayout.append(e.createVisual());
 
    layout.append(innerLayout);
 
    return layout;
}
 
function legendItemClickOrHover(e) {
    if (e.element.nodeName == "text") {
        e.preventDefault();
    }
}

 

SEE ALSO

RadHtmlChart Client-side Events

RadHtmlChart Visual Templates

Kendo UI Drawing API

 

Files

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.