Show Title only on Top in EXT JS - extjs

Question

I want to show the title on Top, here is the code for same and please see the output below:
Data is coming but it overwrites the title , so is there anyway to show title separately on to the top, can anybody help?
items: {
xtype: 'chart',
animate: true,
shadow: true,
store: store,
legend: {
position: 'top',
title: 'XYZ ....',
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('startPeriod') + 'to ' + storeItem.get('endPeriod'));
}
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['per01', 'per02'],
title: false,
grid: true,
roundToDecimal: false
},
{
title: 'XYZ...',
position: 'top',
type: 'Category',
position: 'Bottom',
fields: ['..'],
label: {
rotate: {
degrees: 270
}
}
}, ],
series: [{
//type: 'bar',
type: 'column',
axis: 'bottom',
gutter: 80,
xField: 'ou',
//title: periodStr1,
title: ['April-' + lastyear_graph1 + " to " + strMonth + "-" + selectedText_yr, 'April-' + year2 + " to " + strMonth + "-" + year3_graph1],
yField: ['per01', 'per02'],
stacked: false,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1]));
}
}
}]
}

Answer 1

If you are looking for a title for the chart, you should set the title config of the chart and not the title config of the series. Title config of series is the human-readable name of the series which displayed in the legend.
items: {
xtype: 'chart',
animate: true,
shadow: true,
title: 'My Chart Title', //Set title here
-------------------
-------------------
}