Ext Js 4 Line Chart issue - hovering area of the points is too large
hey everyone, I just started to learn about Sencha Ext JS 4 especially the Charting classes and recently I've come to a big issue:
I've generated a line chart and tried to apply tool tips on every point of the chart. The problem is that the hovering area of each point is way too large and when I try to hover a point which is very close to another point, the chart selects both of them. I'd like to somehow reduce this hovering area if possible, and I tried to look for a property in the Sencha Ext JS 4 documentation but I didn't find anything useful.
Code:
var seriesArray = new Array();
for (i = 0; i < dataArray.length; i++) {
seriesArray.push({
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: dataArray[i],
markerConfig: {
type: 'circle',
size: 4,
radius: 3,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get(item.series.yField) + ' views');
}
}
});
}
Ext.create('Ext.chart.Chart', {
renderTo: document.getElementById("div0"),
width: 500,
height: 300,
animate: true,
store: store3,
axes: [
{
type: 'Numeric',
position: 'left',
//maximum: 50,
fields: dataArray,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: seriesArray
});
}
});
The code above is for defining an array of series for the chart and then generating the chart itself. Maybe I need to add a new property to the line chart or to each series I'm adding..
Please help me someone,, Thank you very much !!!!
