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

How to Set Dimensions (Width and Height) to RadHtmlChart Tooltips


I this article you will understand how to set width and height of the tooltips in RadHtmlChart.


The dimensions of the tooltips are controlled by their content, because they are <div> elements with position:absolute. Here is a basic example of how this operates:

<div style="border: 2px solid red; position: absolute; top: 10px; left: 10px; background: yellow; z-index: 2">
    <div style="background: blue; width: 500px; height: 200px;">content</div>

To apply this to RadHtmlChart, use a template that provides the desired dimensions. Here is a small example:

<telerik:RadHtmlChart runat="server" ID="rhc1" Width="500px" Height="300px">
                         <div style="width: 300px; height: 100px;">tooltip contents for the item with value: #= value #</div>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="2" />
                    <telerik:CategorySeriesItem Y="3" />
                    <telerik:CategorySeriesItem Y="4" />
In this article