Display tooltip on legend kendo chart

[Yago]

Hi. 

I'm using donut chart, and I would like to know if there is any way to add a tooltip with the full name of the legend when hovering over it. I needed it because there is a scenario where I add ellipsis when the name is too big. As in the image below:   

I'm adding ellipsis changing the legend content:

public legendItemContent = (elements: any): string => {
    if (elements.text.length > 30) {
        elements.text = elements.text.substring(0, 30);

        return elements.text.concat('...');
    }

    return elements.text;
};

I tried several solutions but none were successful. I found out this answer, which was the closest approach, but it's not exactly what I wanted.

If it helps in any way, I'm using this stackblitz project to perform my tests.

Thank you beforehand.

[Silviya]

Hello Yago,

The Chart component doesn't have such tooltip on legend functionality coming out of the box. There is a way to implement it though.

The developer can utilise the mouseenter and mouseleave events over the chart's surface ( https://www.telerik.com/kendo-angular-ui/components/charts/api/ChartComponent/#toc-surface ) and display custom content ( https://www.telerik.com/kendo-angular-ui/components/drawing/api/Surface/#toc-bind ).

Also, we'd have to use the visual function available on the legend item.

I have created a demo show-casing this approach: https://stackblitz.com/edit/angular-m4ttdf-tlddpf?file=app%2Fapp.component.ts 

The shared example is only an illustration of a possible way to achieve the desired custom tooltip behaviour. Of course, modifications and optimisations are at the discretion of the developer.

I hope this helps.

Regards,

Silvyia

 

[Silviya]

Hi Yago,

Sorry, I've pasted an URL for a different demo. The correct one is this: https://stackblitz.com/edit/angular-m4ttdf-tlddpf?file=app%2Fapp.component.ts

I'll modify the link in my previous comment so there is no confusion about it in the future.