Display chart tooltip on legend item hover event

[Alexey]

Hi.

I'm using pie chart. Is there any way to display chart tooltip (kendo-chart-series-item-tooltip) when mouse hovers on legend-item? It must be like on the image.

And it would be great if legend would show categoryField and field value, is it possible?

Thank you.

[Alexey]

I'm done with the second question, i have to read documentation more attentively.

If someone will look for the answer:

Template:
<kendo-chart-legend position="right" [labels]="{ content: legendLabelData }">
...
Component:
public legendLabelData(data: any) {
   return data.text + ' ' + (data.percentage * 100).toFixed(2) + '%';
}

 

But the second problem is still opened.

[Svet]

Hi Alexey,

Thank you for the screenshot.

We can customize the legend items content using the [content] input property of the [labels] input property of the LegendComponent.

About the tooltips, we can display them using the chart's showTooltip function on (legendItemHover) event of the chart. We can also customize the content of the tooltips by using the kendoChartSeriesTooltipTemplate as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/charts/chart/elements/tooltips/#toc-specifying-a-template

Here is a sample plunker demonstrating the discussed approaches:

https://plnkr.co/edit/V2ME5oh6BPR7NHtgN4ra?p=preview

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Alexey]

Hi Svetlin.

Thank you so much, i'm absolutely inattentive, sorry for the wasted time.

[Selim]

Hello i'm searching for an issue to that for kendoreact and your way to develop it does not work for me. Have you an idea of what I maybe did wrong ?
<Chart onLegendItemHover={(e :any) => {
return e.sender.showTooltip((point :any) => point.index === e.pointIndex);
}}>


Thanks you.

[Svet]

Hi Selim,

Currently, the Kendo UI for React suite misses such method as the showTooltip() function suggested in this ticket.

What I can suggest at this point is to log a new feature request in the Kendo React Feedback portal asking for the requirement or open a new thread in the Kendo UI for React forum:

https://www.telerik.com/forums/kendo-ui-react

Regards,

Svetlin
Progress Telerik