View Full Version : ExtJs 4 Charts Tool tip issue.

15 Apr 2014, 6:38 AM
I've implemented a multi series {more than one y-series} chart in extjs 4 for my client. Now the problem is, I have 3 vendors as Y-series like ["Vendor1", "Vendor2", "Vendor3"] and the corresponding data as [100,98,98]. I have implemented tooltips for the chart and it shows the correct data value but the wrong ySeries value if 2 ySeries have same value like 98,98. In this case it shows ["Vendor2",98] for both vendor2 and vendor3 under May-2011.
As shown in the image attached,
Code I've used is:

var label;
var position;
for(var i=0; i< ySeries.length; i++)
position = i;
if(item.value[1] == storeItem.get(ySeries[i]))
label = ySeries[i];
As soon as it matches the item.value[1] with the storeItem.get(ySeries[i]) it is giving the corresponding ySeries label. Please suggest me some other way to work around for the correct label.

Note : storeItem.get(xColumn) doesnt help me anything.Ideas regarding storeItem, record are needed as I'm not aware of them :s

Thanks in advance,
Satya Dileep Kumar.

15 Apr 2014, 1:20 PM
Can you create an example for us in a fiddle?

Also .. can you test on a later version of Ext4 if you are using an old version.

29 Apr 2014, 6:54 AM
Hey Scott,
Thanks for the reply, Firstly I'm using the sandbox mode and not the Ext Js 4. Second, I couldn't access the fiddle to give you the sample, rather I'm pasting the complete sample that my nerd brain tried8-|, please refer it and help me out.

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

Ext.onReady(function () {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3'],
data: [
{name: 'Apr-2011', data1: 20, data2: 40, data3: 40},
{name: 'May-2011', data1: 20, data2: 0, data3: 0},
{name: 'July-2011', data1: 12, data2: 55, data3: 21},
{name: 'Aug-2011', data1: 12, data2: 67, data3: 54}
var y_axes = ['data1', 'data2', 'data3'];
var legend = ['data1', 'data2', 'data3'];
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
style: 'background:#fff',
shadow: false,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1','data2','data3'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
title: 'Number of Hits',
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
series: [{
type: 'column',
axis: 'left',
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;
if(item.value[1] == storeItem.get(y_axes[i]))
label = legend[i];
this.setTitle(label+','+ storeItem.get('name')+ ': ' + item.value[1]);
label: {
display: 'insideEnd',
field: ['data1','data2','data3'],
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
contrast: true
xField: 'name',
yField: ['data1','data2','data3']

var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Bar Renderer',
autoShow: true,
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'){
type: 'image/png'
}, ],
items: chart

Pardon me if any typos or alignments goes wrong. PFA the attachment showing the problem..
Thanks and Regards,
Satya Dileep Kumar.

29 Apr 2014, 7:32 AM
Yes, the problem is in your renderer.. Perhaps you have check if item.yField === legend[i] instead of checking for a value that can be a duplicate and stops on the first occurrence. If you change data3 to 41, you see it will be correct.

29 Apr 2014, 9:53 PM
Hi Scott,
Thanks a ton for your valuable reply. WRT this context I would like to ask the properties of "item" and "storeItem". I understand they have lot of power in them, so I want to know the properties of each as I couldn't get much out of google :s
ex. "item.value[0] gives "x-axis current label" "item.yField" gives yField legend

Expecting a reply :)

30 Apr 2014, 1:26 AM
Hi Scott,
The same example when I tried with line Chart, item.yField didn't work :( Its giving it as undefined. Is there a way to get the yField name as you suggested in case of Line charts?
Please help me with solution. :s