Kendo Chart for Angular: event on lowlighting serie item

[J]

Is there any event, which is fired, when the chart column is lowlighted? E.g. when the cursor goes to another serie item or simply goes far enough.

I know there is an event "seriesLeave", but this is not what I'm looking for since this is fired directly when the cursor moves off the column and not yet when the columns turn darker.

I've already tried "plotAreaLeave", but neither this is the one I need.

Thanks for any reply.

[Martin Bechev]

Hi J,

I am not sure that understand what you mean by lowlighted. Could you specify what event you are searching for (on what user interaction) - when the user hovers a series column or when it has been blurred? Let's take the following demo as an example:

https://stackblitz.com/edit/angular-tlcbmeu1

 

[J]

Hello Martin,

well, when user hovers the column, then the column is highlighted (it's colour is lightened a little using increased opacity) and when the cursor goes away, it's darkened again.

But I've already found a solution/workaround - to hang the handler on mouseleave event of the chart (maybe it's even not a workaround - maybe the darkening of the column is bound to this event?).

[Martin Bechev]

Hi J,

Thank you for the clarification.

Indeed you already found the available events when the user interacts with the Chart series. The seriesHover and seriesLeave events are emitted when the user series is hovered or blurred.

    <kendo-chart (seriesHover)="onHover()" (seriesLeave)="onLeave()">
     ...
    </kendo-chart>

However, I am still not sure what customization needs to be made and why the seriesLeave event isn't suitable. Currently, there is no separate built-in event emitted when the series opacity is changed. 

[J]

Martin,

I'm trying to hover the chart with cursor and move it around quite slowly (to be able to focus on blurring and emitting the event) and I'm still experiencing the same behaviour: 'seriesLeave' event is fired immediately after cursor moves away from the column, but the column is not blurred at that moment, i.e. until cursor hovers another column or goes away from the chart completely.

Do you have different experience?

[Martin Bechev]

Hi J,

The behavior you're observing with the Kendo UI for Angular Chart is expected.

When you hover over a series, it gets highlighted, and the seriesLeave event is triggered right after the cursor leaves the series. However, the visual highlight remains until you hover over another series or exit the chart area. This is designed to maintain interaction continuity and user experience.

The same behavior is observed with the tooltips as well - they remain visible until another series is hovered or the cursor leaves the plot area:

https://www.telerik.com/kendo-angular-ui/components/charts/elements/tooltips#series-tooltip-configuration

So far there is no built-in approach that can be used to avoid this behavior.

[J]

I wasn't trying to avoid the behaviour and also I don't say that the behaviour is wrong.

I was trying to find an event, which is fired, when column is blured, which I was able to find.

The end.  Anyway thank you for clarification.