ToolTip on Chart Legend

[vick_44]

I wish to display a tooltip on the chart legend but no matter what I try it doesnt seem to work for me.

Here below is a code snippet picked up from sencha docs, pasting these in a fiddle would compile and run but without a tooltip on the legend.

I tried the code highlighted below,

I would much appreciate it if anyone can point me in the right direction.

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [
        {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
        {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
        {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
        {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
        {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
    ]
});


Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    store: store,
    legend: {
        position: 'right',
       listeners:{
                          itemmouseenter:function( oElem, record, item, index, e, eOpts ){
                                Ext.create("Ext.tip.ToolTip",{
                                    target:item,
                                    autoShow:true,
                                    trackMouse:true,
                                    html: 'Hello',
                                    hideDelay:0,
                                    showDelay:0
                                });
                            }
                        }
    },
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
        title: 'Sample Values',
        grid: {
            odd: {
                opacity: 1,
                fill: '#ddd',
                stroke: '#bbb',
                'stroke-width': 1
            }
        },
        minimum: 0,
        adjustMinimumByMajorUnit: 0
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['name'],
        title: 'Sample Metrics',
        grid: true,
        label: {
            rotate: {
                degrees: 315
            }
        }
    }],
    series: [{
        type: 'area',
        highlight: false,
        axis: 'left',
        xField: 'name',
        yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
        style: {
            opacity: 0.93
        }
    }]
});

[petrocomp]

Hi vick_44,

I'm not sure if you can do it your way. I checked the spec and a legend object doesn't have listeners. I was able to add this tooltip in a different place. Please refer to the code below:

Ext.application({
    name: 'Fiddle',


    launch: function () {
        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
            data: [{
                'name': 'metric one',
                'data1': 10,
                'data2': 12,
                'data3': 14,
                'data4': 8,
                'data5': 13
            }, {
                'name': 'metric two',
                'data1': 7,
                'data2': 8,
                'data3': 16,
                'data4': 10,
                'data5': 3
            }, {
                'name': 'metric three',
                'data1': 5,
                'data2': 2,
                'data3': 14,
                'data4': 12,
                'data5': 7
            }, {
                'name': 'metric four',
                'data1': 2,
                'data2': 14,
                'data3': 6,
                'data4': 1,
                'data5': 23
            }, {
                'name': 'metric five',
                'data1': 27,
                'data2': 38,
                'data3': 36,
                'data4': 13,
                'data5': 33
            }]
        });


        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            store: store,
            legend: {
                position: 'right'
            },
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
                title: 'Sample Values',
               
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                },
                minimum: 0,
                adjustMinimumByMajorUnit: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Sample Metrics',
                grid: true,
                label: {
                    rotate: {
                        degrees: 315
                    }
                }
            }],
            series: [{
                type: 'area',
                highlight: false,
                axis: 'left',
                xField: 'name',
                listeners:{
                    itemmouseover: function(item){
                        Ext.create("Ext.tip.ToolTip",{
                                    target:item,
                                    autoShow:true,
                                    trackMouse:true,
                                    html: 'Hello',
                                    hideDelay:0,
                                    showDelay:0
                                });
                        console.log(item);
                    },
                    scope: this
                },
                yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
                style: {
                    opacity: 0.93
                }
            }]
        });
    }
});

[vick_44]

Hi petrocomp, thanks for the reply. With your code the tooltip gets activated with mouse over on graph region but I wish to have a tooltip with mouse over on graph legend region, the right most part of the graph. Is there anyway to add tooltip to a certain region in chart panel if we know the dimensions and co ordinates of the legend box may be in a controller?

So far I have accomplished below hack, but it is not what I ultimately want as some of the features of legend will be lost.
> I created a display field with same dimension as the legend box on the chart.
> I gave the "value" attribute of display field as   a long string comprising array of nbsp's.
> I added a tooltip to this display field on mouse over.
> I made border false and background colour as transparent.
> Lastly I moved this display field right over my legend area in chart.
> Now when I move the mouse over legend area I do get tooltip.
HOWEVER, since this display field overlaps the surface of legend region I lose the functionality of legend which are graph toggle and graph line highlight on selecting an item on legend.

I know the above hack is quite cunning but this is the best I could come up with my limited knowledge. I just need to figure out a way to retain the functionality of legend yet show a tooltip, so the above method is not the right way to go about it, atleast for my requirement .

[petrocomp]

Maybe you should try to extend or override onMouseOver function from Ext.chart.LegendItem. This function is executed when you move your mouse over a legend item.
What do you think?

Something like this:

    onMouseOver: function() {
        var me = this;

Ext.create("Ext.tip.ToolTip", {
                            target: me,
                            autoShow: true,
                            trackMouse: true,
                            html: 'Hello',
                            hideDelay: 0,
                            showDelay: 0
                        });

        
        me.label.setStyle({
            'font-weight': 'bold'
        });
        me.series._index = me.yFieldIndex;
        me.series.highlightItem();
    },

[vick_44]

This sounds like a nice idea: ) . Let me try this and I will update you on this thread about my proceedings..

[vick_44]

Thanks a ton petrocomp, your idea worked!!!!!!

Below is the change that I did.

Highlighted in bold are tooltip postion with respect to legend area and also onMouseOut override to hide the tooltip since it wasnt going off by itself. Created a variable called legendToolTip in legendItem object to use on moustOut event.

Ext.define('overrides.LegendItem', {
    override: 'Ext.chart.LegendItem',


    // Override for legend tooltip
    onMouseOver: function() {
        var me = this;




        me.legendToolTip= Ext.create("Ext.tip.ToolTip", {
            width: 138,
            target: me,
            autoShow: true,
            autoHide: true,
            trackMouse: true,
            html: "<span style='color:red;'>Tip: </span>- Click to turn on/off the Graph line.",
            hideDelay: 0,
            showDelay: 0,
            mouseOffset : [me.legend.x+me.x, me.legend.y+me.y]
        });
        me.legendToolTip.show();
        me.callParent(arguments);
    },


    onMouseOut :  function (){
        var me = this;
        me.legendToolTip.hide();
        me.callParent(arguments);
    }
});

plug and play code snippet for fiddle:

Ext.define('overrides.LegendItem', {
    override: 'Ext.chart.LegendItem',


    // Override for legend tooltip
    onMouseOver: function() {
        var me = this;


        me.legendToolTip= Ext.create("Ext.tip.ToolTip", {
            width: 138,
            target: me,
            autoShow: true,
            autoHide: true,
            trackMouse: true,
            html: "<span style='color:red;'>Tip: </span>- Click to turn on/off the Graph line.",
            hideDelay: 0,
            showDelay: 0,
            mouseOffset : [me.legend.x+me.x, me.legend.y+me.y]
        });
        me.legendToolTip.show();
        me.callParent(arguments);
    },


    onMouseOut :  function (){
        var me = this;
        me.legendToolTip.hide();
        me.callParent(arguments);
    }
});


var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [
        {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
        {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
        {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
        {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
        {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
    ]
});




Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 300,
    store: store,
    legend: {
        position: 'right',
       listeners:{
                          itemmouseenter:function( oElem, record, item, index, e, eOpts ){
                                Ext.create("Ext.tip.ToolTip",{
                                    target:item,
                                    autoShow:true,
                                    trackMouse:true,
                                    html: 'Hello',
                                    hideDelay:0,
                                    showDelay:0
                                });
                            }
                        }
    },
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
        title: 'Sample Values',
        grid: {
            odd: {
                opacity: 1,
                fill: '#ddd',
                stroke: '#bbb',
                'stroke-width': 1
            }
        },
        minimum: 0,
        adjustMinimumByMajorUnit: 0
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['name'],
        title: 'Sample Metrics',
        grid: true,
        label: {
            rotate: {
                degrees: 315
            }
        }
    }],
    series: [{
        type: 'area',
        highlight: false,
        axis: 'left',
        xField: 'name',
        yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
        style: {
            opacity: 0.93
        }
    }]
});

[petrocomp]

vick_44,

You're welcome .

Best wishes,
Peter