Extjs 5 : Tooltip not working for the chart

Question

I am using Extjs 5. The tooltip is not working for my chart. I have read there is some issues in tooltip in ext5. And I have tried that all like

1. tips -> tooltip
2. setTitle -> setHtml
3. Adding 'interactions'

Here is how it looks right now.

Here is my code:

       highlight: {
          segment: {
            margin: 20
          }
        },
        tooltip: {
          trackMouse: true,
          width: 'auto',
          interactions: [{
            type: 'itemhighlight'
          }],
          height: 40,
          renderer: function(storeItem, item) {
            //calculate percentage.
            var total = 0;
            var idType = storeItem.get('type');
            chartStore.each(function(rec) {
                total += rec.get('item1');
            });
            if(storeItem.get('item1') == 0){
                this.setTitle('');
            }else { 
                var pct = ((storeItem.get('item1')/total) * 100).toFixed(0);
                var tipText =  pct + '% (' + storeItem.get('item1') + ' of ' + total + ')<br/>' + storeItem.get('name')
                this.setHtml(tipText);

            }
          }
        },

Is there any fix for this?

Answer 1

I see a problem in the forum in sencha https://www.sencha.com/forum/showthread.php?303423-ExtJS-6.0.0-Documentation-bug-Ext.chart.series.Series.tooltip , you can try with this:

tooltip:{ 
  trackMouse:true, 
  width:140, 
  height:28, 
  scope: this, 
  renderer:function(toolTip, storeItem, item){
    toolTip.setHtml(storeItem.get('name')+': '+ storeItem.get('data1')+' views');
  }
}