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

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

HOW TO

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

SOLUTION

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>
</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">
    <PlotArea>
        <Series>
            <telerik:AreaSeries>
                <TooltipsAppearance>
                    <ClientTemplate>
                         <div style="width: 300px; height: 100px;">tooltip contents for the item with value: #= value #</div>
                    </ClientTemplate>
                </TooltipsAppearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="2" />
                    <telerik:CategorySeriesItem Y="3" />
                    <telerik:CategorySeriesItem Y="4" />
                </SeriesItems>
            </telerik:AreaSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>
In this article