Chart legend hover highlight series

[IT Dept]

Hi

In the following example, hovering over legend items highlights the respective series:
http://demos.kendoui.com/dataviz/pie-charts/local-data.html

How is that achieved? The demo doesn't show any specific configuration, clicking on an legend item also triggers the series' visibility on the chart.

[IT Dept]

Had an older version of Kendo UI, updating provided this functionality.

Is there a possibility of showing a series' tooltip on hovering of its respective legend icon?

[Iliana Dyankova]

Hi Massimiliano,

I am afraid your scenario is not supported out-of-the-box in Kendo UI Chart. In order to workaround it I can suggest you the following approach:

• Hide the default tooltip;
• In the legendItemHover event show the tooltip element.

For sample code check this forum thread.

Regards,
Iliana Nikolova
Telerik

[Kseniya]

Hello Iliana,

Is it possible to cancel legendItemHover like it is possible to cancel legendItemClick?

I tried as:

onLegendItemHover: function (e) {

    e.preventDefault()

}

but it doesn't work. 

 

[Kseniya]

Also, I am trying to disable highlighting when hovering over series using highlight: { visible: false}, but it doesn't disable the highlighting.

My chart options are as follows:

{
                title: {
                    align: 'left',
                    text: SalesTool.I18n.get('LbLNetworkBookingChart')
                },
                dataSource: {
                    transport: {
                        read: {
                            url: '/api/network/booking/v1',
                            type: 'POST',
                            dataType: 'json',
                            contentType: 'application/json'
                        },
                        parameterMap: _.bind(this._parameterMap, this)
                    },
                    requestStart: function () {
                        kendo.ui.progress($('#loading'), true);
                    },
                    requestEnd: function () {
                        kendo.ui.progress($('#loading'), false);
                    },
                    change: _.bind(this._onChange, this),
                    error: function () {
                        SalesTool.Common.Utils.showErrorToast(SalesTool.I18n.get('FailedFetchBookingError'));
                    }
                },
                legend: {
                    visible: true,
                    position: 'top',
                    align: 'start',
                    margin: {
                        bottom: 20
                    }
                },
                seriesDefaults: {
                    type: 'column',
                    stack: true,
                    gap: 0.5
                },
                series: [
                    {
                        overlay: {
                            gradient: 'none'
                        },
                        highlight: {
                            visible: false
                        },
                        field: 'booked',
                        name: SalesTool.I18n.get('LblBooked'),
                        color: '#00a8ff',
                        categoryField: 'period',
                        tooltipName: SalesTool.I18n.get('LblCampaigns'),
                    },
                    {
                        overlay: {
                            gradient: 'none'
                        },
                        highlight: {
                            visible: false
                        },
                        field: 'proposed',
                        name: SalesTool.I18n.get('LblProposed'),
                        color: '#802ef8',
                        categoryField: 'period',
                        tooltipName: SalesTool.I18n.get('LblProposals'),
                    }
                ],
                valueAxis: {
                    labels: {
                        template: '#:value#%'
                    },
                    line: {
                        visible: false
                    },
                    plotBands: [{from: 99.9, to: 100, color: '#515974'}],
                    minorGridLines: {
                        visible: false
                    },
                    majorGridLines: {
                        visible: false
                    }
                },
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    color: '#515974',
                    padding: {
                        top: 5,
                        bottom: 5,
                        left: 10,
                        right: 10
                    },
                    template: '#= series.tooltipName # : #= series.field == \"booked\" ? dataItem.campaigns :series.field == \"proposed\" ? dataItem.proposals:0 #'
                },
                legendItemClick: _.bind(this._preventLegendShowHide, this),
                legendItemHover: _.bind(this._preventLegendHover, this)
            }

[Kseniya]

I am sorry, after clearing the cache hightlighting got disabled.

[Iliana Dyankova]

Hi Kseniya,

Yes, the legendItemHover event can be prevented - take a look at the following code snippet: 

//....
legendItemHover: function(e){
    e.preventDefault();
}

For your convenience below is an example: 

http://dojo.telerik.com/@Iliana/ETozaT

Regards,
Iliana Nikolova
Telerik by Progress