add tooltips option to axis labels in HTML Charts

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 04 Jun 2020 07:57 by ADMIN

Anil

Created on: 10 Mar 2016 19:06

Category: HtmlChart

Type: Feature Request

add tooltips option to axis labels in HTML Charts

Right now we do not have a way to show some tooltips over Axis Labels
This is useful when we have big names for Axis Labels, we can put some short cut names be default and then show full name over tool tip.

We can use Series tooltip, but it looks ugly for stacked series when you have 4 to 5 series

3 comments

ADMIN

Peter Milchev

Posted on: 04 Jun 2020 07:57

Hello Kasim,

The solution can be easily scaled to apply this for all charts on the page or only the charts with a specific CssClass assigned:

function pageLoadHandler() {
    // .RadHtmlChart gets all the charts on the page
    $telerik.$(".RadHtmlChart").each(function () {
        var chart = this.control;
        var kendoWidget = chart.get_kendoWidget();
        console.log(kendoWidget)
        // old solution here ...
    })

    // Sys.Application.remove_load(pageLoadHandler);  
}
Sys.Application.add_load(pageLoadHandler);

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Kasim

Posted on: 02 Jun 2020 03:59

Hi Peter,

The solution appears workable where we have small number of charts. However, for all practical purposes, a simpler solution is expected soon in the default toolset.

ADMIN

Peter Milchev

Posted on: 01 Jun 2020 16:19

Hi,

I am sharing the solution from the support ticket.

Option 1: Follow the KB for the Kendo UI Chart:

https://docs.telerik.com/kendo-ui/controls/charts/how-to/integration/tooltip-for-category-axis-labels

Option 2: Create a custom tooltip

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Series 1">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="30" />
                    <telerik:CategorySeriesItem Y="10" />
                    <telerik:CategorySeriesItem Y="20" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <XAxis>
            <LabelsAppearance Visual="labelsVisual"></LabelsAppearance>
            <Items>
                <telerik:AxisItem LabelText="Item 1" />
                <telerik:AxisItem LabelText="Item 2" />
                <telerik:AxisItem LabelText="Item 3" />
            </Items>
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>
<div class="customTooltip">CustomTooltip</div>

 function labelsVisual(e) {
        // The actual label
        var labelVisual = e.createVisual();
        var bbox = labelVisual.bbox();
 
        // An invisible rectangle to serve as a hot zone
        var sink = kendo.drawing.Path.fromRect(bbox, {
            stroke: null,
            fill: {
                color: "#fff",
                opacity: 0
            }
        });
 
        // Maintain reference for event handlers             
        sink.tooltipText = e.text;
 
        var visual = new kendo.drawing.Group();
        visual.append(labelVisual, sink);
        return visual;
    }

function pageLoad() {
    var kendoWidget = $find("RadHtmlChart1").get_kendoWidget();
    $ = $telerik.$;
    var ttip = $(".customTooltip");
    kendoWidget.surface.bind("mouseenter", function (e) {
        if (e.element.tooltipText) {
            var pos = e.element.bbox().getOrigin();
            pos.y = pos.y + 30;
            ttip.html(e.element.tooltipText).show();
            ttip[0].style.top = pos.y + 'px';
            ttip[0].style.left = pos.x + 'px';
             
        }
    });
    kendoWidget.surface.bind("mouseleave", function (e) {
        if (e.element.tooltipText) {
            ttip.hide();
        }
    });
}

<style>
    .customTooltip {
        display: none;
        color: #fff;
        font-size: 20px Arial, sans-serif;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        background: green;
        width: 200px;
        height: 20px;
    }
</style>

Regards,
Peter Milchev
Progress Telerik