1

I am trying to add tooltips to my ExtJS chart. The tooltip is getting rendered but not under the mouse pointer. It is getting rendered near end of the page.

Ext.create('Ext.chart.Chart', {
 renderTo: Ext.getBody(),
 width: 470,
 height: 300,
    store: store,
 axes: [{
                type: 'Numeric',
                minimum: 0,
                minorTickSteps: 0,
                maximum: 150,
                position: 'left',
                fields: ['lineY', 'greenY', 'yellowY', 'redY'],
                title: 'Buffer Penetration'

            }, {
                type: 'Numeric',
                position: 'bottom',
                fields: ['lineX', 'areaX'],
                title: 'Critical Chain Comp'
            }],
 series: [
            {
                type: 'area',
                axis: 'left',
                xField: 'areaX',
                yField: ['redY']

            },

             {
                 type: 'area',
                 axis: 'left',
                 xField: 'areaX',
                 yField: ['yellowY']

             },
             {
                 type: 'area',
                 axis: 'left',
                 xField: 'areaX',
                 yField: ['greenY']

             },

            {
                type: 'line',
                axis: 'left',
                fill: false,
                // tip: 'This is a tip',
                xField: 'lineX',
                yField: 'lineY',
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function (storeItem, item) {
                        // calculate and display percentage on hover

                        this.setTitle("Tooltip Text");
                    }
                }

            }
           ]
  });

I have my code here : http://jsfiddle.net/Abhishek1191/vdazU/1076/

I feel like I am doing something silly here or maybe there is some issue with the ExtJS library I am using. Help would be highly appreciated

abhishek1191
  • 145
  • 1
  • 10
  • It may be the library version, it looks better with 4.2.1: https://fiddle.sencha.com/#fiddle/no6 – Zero Cool May 29 '15 at 19:35
  • Many thanks for the help Zero Cool. It does look better! I am surprised. I'm using 4.2.1 in my application, but still it doesn't display properly. I have a license for ExtJS 4.2.1. It would be of great help if you may provide me with any cdn/js library which may display it properly – abhishek1191 May 31 '15 at 09:09
  • Hi @ZeroCool I am using 4.2.1 only both in my code and the jsFiddle I've provided. Still, I am getting the same issue. But it is not reproducing on Sencha Fiddle. Any suggestions ? – abhishek1191 Jun 01 '15 at 13:53
  • The jsfiddle is using 4.2.0 and the Sencha fiddle 4.2.1.833 these are different versions. I use 4.2.3 in my application with no issues. Outside of the version you are using I'm not sure what the issue is. – Zero Cool Jun 01 '15 at 15:06
  • Hi @ZeroCool, Thanks for your help. We resolved the issue by manually overriding the css of the Tooltip class. Setting the position : absolute in CSS worked like a charm. – abhishek1191 Jun 04 '15 at 05:43

0 Answers0