EXTJS 5 Chart ToolTip Using "sencha-charts" on require[] not working

Question

Im currently using ExtJs5 MVVM architecture and I require "sencha-chart" than "ext-chart" on the app.json file, Charts works fine but adding tooltip on the bar series im using doesn't work. No error logs.

I also check their example on sencha chart kitchensink (which chart tooltip is working) found out that they require "ext-chart" for that. My code for bar series with tooltip config:

series: [{
     type: 'bar',
     xField: 'name',
     yField: ['data1'],
         style: {
                opacity: 0.80
        },
        highlight: {
                fill: '#000',
                'stroke-width': 20,
                stroke: '#fff'
        },
        tips: {
                trackMouse: true,
                style: 'background: #FFF',
                height: 20,
                renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '%');
                }


                }

    }]

Is there something wrong with my codes?

Thanks

score 3 · Accepted Answer · answered Jul 29 '14 at 13:47

3

Your code needs one small change "tips" for EXTjs 5 becomes "tooltip."

tooltip: {
    trackMouse: true,
    style: 'background: #FFF',
    height: 20,
    renderer: function(storeItem, item) {
         this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '%');
    }
}

However, there are a lot of bugs with the EXTjs 5 charts. I had this same issue, and submitted a bug to Sencha:

http://www.sencha.com/forum/showthread.php?289313-Sencha-EXTjs-5-Charts-Broken-Tooltips

answered Jul 29 '14 at 13:47

Josh

461
4
8

Yes, I got it already. Thanks Josh. Also I think I need to add this configuration "interactions": 'itemhighlight' for example for it to work. – starTreyk Jul 30 '14 at 03:18
Hi Josh, try to add interactions configuration. tried including it and it works. – starTreyk Jul 30 '14 at 05:58

score 1 · Answer 2 · answered Feb 12 '15 at 07:37

tooltip: {
trackMouse: true,
style: 'background: #FFF',
height: 20,
renderer: function(storeItem, item) {
     this.setHtml(storeItem.get('name') + ': ' + storeItem.get('data1') + '%');
}    
}

I used tooltip inplace of tips and this.setHtml() in place of this.setTitle() ,and it worked for me.

EXTJS 5 Chart ToolTip Using "sencha-charts" on require[] not working

2 Answers2