ExtJS 6 - How to show tips on charts?

Question

We have been using tips configuration of series in order to set interactive tips for ExtJS 4 & 5. But with ExtJS 6, it does not work anymore. So what is the proper way of showing tips using ExtJS 6 chart package?

series: [{
    type: 'pie',
    field: 'count',
    showInLegend: true,
    donut: false,
    tips: {
        trackMouse: true,
        width: 140,
        height: 40,
        renderer: function(storeItem, item) {
            this.update(storeItem.get('name') + ':' + storeItem.get('count'));
        }
    }
}]

Answer 1

It looks like the tooltip renderer method arguments have been swapped around between versions, otherwise your fiddle is almost there. The this keyword appears to be the series rather than the tooltip - it's best not to rely on the JS context in ExtJS anyway and Sencha appear to be making efforts while refactoring the API, to ensure that you can consistently expect a reference to the relevant component as the first argument of any callback.

If you look at the series-tooltip in the API it will confirm that the first argument is a reference to the tooltip and the second argument is the selected record - so you can update a tooltip as follows:

{
    xtype: 'pie'
    // ...
    tooltip: {
        // ...
        renderer: function(tip, item){
            tip.update(item.get('name') + ': ' + item.get('count'));
        }
    }
}

» updated fiddle

Answer 2

Seems you switched from ext-charts to sencha-charts.

It is no more tips property for Series :

ExtJS 4 - http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.chart.series.Series-cfg-tips

ExtJS 6 - http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.chart.series.Series

Try tooltip property it should be the same as tips before

Answer 3

tooltip: {
  trackMouse: true,
  renderer: function(toolT, storeItem) {
              toolT.setHtml('dummy tooltip');
  }
}

Try this.