This is a migrated thread and some comments may be shown as answers.

Chart legend hover highlight series

6 Answers 262 Views
Charts
This is a migrated thread and some comments may be shown as answers.
IT Dept
Top achievements
Rank 1
IT Dept asked on 31 Jul 2013, 12:10 PM
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.

6 Answers, 1 is accepted

Sort by
0
IT Dept
Top achievements
Rank 1
answered on 31 Jul 2013, 12:45 PM
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?
0
Iliana Nikolova
Telerik team
answered on 01 Aug 2013, 01:46 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kseniya
Top achievements
Rank 1
answered on 27 Sep 2016, 02:31 PM

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. 

 

0
Kseniya
Top achievements
Rank 1
answered on 27 Sep 2016, 02:44 PM

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)
            }

0
Kseniya
Top achievements
Rank 1
answered on 27 Sep 2016, 02:46 PM
I am sorry, after clearing the cache hightlighting got disabled.
0
Iliana Nikolova
Telerik team
answered on 29 Sep 2016, 07:44 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Charts
Asked by
IT Dept
Top achievements
Rank 1
Answers by
IT Dept
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Kseniya
Top achievements
Rank 1
Share this question
or