Ext5 : Pie chart being cut off when hovering - css

Question

I am using Ext5 pie chart.
When I mouse hover the pie chart it is being cut off.
The code for the pie chart is given below.
{
type: 'pie',
field: 'item1',
renderer: function(sprite, config, rendererData, index) {
var record = rendererData.store.getAt(rendererData.series.sprites.indexOf(sprite));
var name = record.get('name');
if(chartObj.baseThemeColors[name]){
var color = chartObj.baseThemeColors[name];
} else {
color = chartObj.getRandomColor();
chartObj.baseThemeColors[name] = color;
}
return Ext.apply(rendererData, {
fill: color
});
return rendererData;
},
subStyle: {
strokeStyle: 'white',
insertPadding: '50',
lineWidth: '0.5'
},
highlight: {
segment: {
margin: 20
}
},
tooltip: {
trackMouse: true,
width: 'auto',
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.setTitle(tipText);
}
}
},
label: {
field: 'name',
display: 'rotate',
font: '14px Arial',
renderer: function(text, sprite, config, rendererData, index){
var item = rendererData.store.getAt(index);
var total = 0,
idType = item.get('type'),
labelText = "";
chartStore.each(function(rec) {
total += rec.get('item1');
});
if(item.get('item1') == 0){
labelText = '';
} else {
var pct = ((item.get('item1') / total) * 100).toFixed(0);
if(pct>1){
labelText = text + ' ' + pct+'%';
} else {
labelText = '';
}
}
return labelText;
}
}
}
Here is the image of the issue.
As you can see top of the 'negative' slice is being cut off when mouse hovering. And I cannot remove that slice moving animation when hovering.
Is there any solution for this?
Thanks in advance.

Answer 1

Try setting
trackMouse: false
Instead of
trackMouse: true