I have a chart with the following code
{
xtype: 'chart',
centered: true,
height: '100%',
id: 'ClipsViewedChart',
width: '100%',
modal: false,
colors: [
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'ClipsViewed',
axes: [
{
type: 'category',
fields: [
'meta_id'
],
grid: true,
label: {
rotate: {
degrees: 0
},
font: '10px'
},
title: 'Clips'
},
{
type: 'numeric',
fields: [
'viewed',
'glances'
],
grid: true,
position: 'left',
title: 'Amount'
}
],
series: [
{
type: 'bar',
label: {
display: 'outside',
field: 'title',
orientation: 'vertical',
'text-anchor': 'middle',
font: '10px'
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
labelField: 'title',
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
],
interactions: [
{
type: 'panzoom'
},
{
type: 'iteminfo'
}
],
legend: {
xtype: 'legend'
}
}
I need to add an ontap item interaction to my chart, however I am not sure how to do that, I need to show series data on tap of one of the series in my chart
This is my model code
Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'meta_id'
},
{
name: 'title'
},
{
name: 'viewed'
},
{
name: 'glances'
}
]
}
});
So far I have added this to my chart
onItemInfoShow: function(iteminfo, item, panel, eOpts) {
panel.update(item.get('meta_id') + '<br />' + item.get('title'));
}
I just want to know how to correctly render this information on my chart, the information being the title and its meta_id