Chart legend hover highlight series

7 posts, 0 answers
  1. Joe
    Joe avatar
    14 posts
    Member since:
    May 2010

    Posted 31 Jul 2013 Link to this post

    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.
  2. Joe
    Joe avatar
    14 posts
    Member since:
    May 2010

    Posted 31 Jul 2013 Link to this post

    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?
  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 01 Aug 2013 Link to this post

    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!
  5. Kseniya
    Kseniya avatar
    6 posts
    Member since:
    Jan 2016

    Posted 27 Sep Link to this post

    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. 

     

  6. Kseniya
    Kseniya avatar
    6 posts
    Member since:
    Jan 2016

    Posted 27 Sep Link to this post

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

  7. Kseniya
    Kseniya avatar
    6 posts
    Member since:
    Jan 2016

    Posted 27 Sep in reply to Kseniya Link to this post

    I am sorry, after clearing the cache hightlighting got disabled.
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 29 Sep Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready