Line chart Tool tip says "undefined"

I've used the lineChart example that came in extjs folder and added tooltip for the chart. The value shows up properly but I couldn't retrieve the series value properly

My target is to display the "series label {appropriate legend name} and the value" but not "xaxis label and value"

Basically I don't have complete knowledge on the item and storeItem.get properties which I couldn't find on google or in docs

"item.yField" is showing undefined. but the same worked in case of Column chart.

PFA the screenshots showing the problem.linetip.PNGlinetip2.PNG

The code I've used is

Ext.require('Ext.chart.*');

Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);

Ext.onReady(function () {

store1.loadData(generateData(8));

var store = Ext.create('Ext.data.JsonStore', {

fields: ['name', 'data1', 'data2', 'data3'],

data: [

{name: 2005, data1: 20, data2: 30, data3: 40},

{name: 2006, data1: 20, data2: 20, data3: 60},

{name: 2007, data1: 12, data2: 55, data3: 21},

{name: 2008, data1: 12, data2: 67, data3: 54}

]

});

var y_axes = ['data1', 'data2', 'data3'];

var legend = ['data1', 'data2', 'data3'];

var chart = Ext.create('Ext.chart.Chart', {

style: 'background:#fff',

animate: true,

store: store,

shadow: true,

theme: 'Category1',

legend: {

position: 'right'

},

axes: [{

type: 'Numeric',

minimum: 0,

position: 'left',

fields: ['data1', 'data2', 'data3'],

title: 'Number of Hits',

minorTickSteps: 1,

grid: {

odd: {

opacity: 1,

fill: '#ddd',

stroke: '#bbb',

'stroke-width': 0.5

}

}

}, {

type: 'Category',

position: 'bottom',

fields: ['name'],

title: 'Month of the Year'

}],

series: [{

type: 'line',

highlight: {

size: 7,

radius: 7

},

axis: 'left',

xField: 'name',

yField: 'data1',

markerConfig: {

type: 'cross',

size: 4,

radius: 4,

'stroke-width': 0

},

tips: {

// trackMouse: true,

width: 200,

height: 40,

constrainPosition: true,

renderer: function(storeItem, item) {

var label;

var position;

for(var i=0; i< legend.length; i++)

{

position = i;

alert(item.yField+".yField");

if((item.yField == storeItem.get(y_axes[i])))

{

label = legend[i];

break;

}

}

this.setTitle(label+','+ storeItem.get('name')+ ': ' + item.value[1]);

}

}

}, {

type: 'line',

highlight: {

size: 7,

radius: 7

},

axis: 'left',

smooth: true,

xField: 'name',

yField: 'data2',

markerConfig: {

type: 'circle',

size: 4,

radius: 4,

'stroke-width': 0

},

tips: {

// trackMouse: true,

width: 200,

height: 40,

constrainPosition: true,

renderer: function(storeItem, item) {

var label;

var position;

for(var i=0; i< legend.length; i++)

{

position = i;

// alert(item.legend+".data2 yfield");

if((item.value[1] == storeItem.get(y_axes[i]))) //&& (item.yField == y_axes[i]))

{

label = legend[i];

break;

}

}

this.setTitle(label+','+ storeItem.get('name')+ ': ' + item.value[1]);

}

}

}, {

type: 'line',

highlight: {

size: 7,

radius: 7

},

axis: 'left',

smooth: true,

// fill: true,

xField: 'name',

yField: 'data3',

markerConfig: {

type: 'circle',

size: 4,

radius: 4,

'stroke-width': 0

}

}]

});

var win = Ext.create('Ext.Window', {

width: 800,

height: 600,

minHeight: 400,

minWidth: 550,

hidden: false,

maximizable: true,

title: 'Line Chart',

renderTo: Ext.getBody(),

layout: 'fit',

tbar: [{

text: 'Save Chart',

handler: function() {

Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){

if(choice == 'yes'){

chart.save({

type: 'image/png'

});

}

});

}

}, {

text: 'Reload Data',

handler: function() {

// Add a short delay to prevent fast sequential clicks

window.loadTask.delay(100, function() {

store1.loadData(generateData(8));

});

}

}],

items: chart

});

});

Please help me out Thanks in advance