How to render series data to a title in sencha charts

Question

I have a chart retrieving data from my store, the four bits of information are the following

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'
        }
    ]
}
});

Now I have the viewed field and the glances field as the numeric fields in the chart, and the title field as the category title in the chart.

I want to render the title name of the field when I hover over it, reason id this. The titles are too long to fit in the x-axis of the chart so in place of the titles I am putting 'meta_id'. So when I hover over the x-axis meta_id field I want the title name to be shown

so for example

meta_id 100 will equal title value ###

Here's is my chart code so far

{
                            xtype: 'chart',
                            centered: true,
                            height: '150%',
                            colors: [
                                '#24ad9a',
                                '#7c7474',
                                '#a66111'
                            ],
                            store: 'ClipsViewed',
                            axes: [
                                {
                                    type: 'category',
                                    fields: [
                                        'meta_id'
                                    ],
                                    grid: true,
                                    label: {
                                        rotate: {
                                            degrees: 0
                                        },
                                        font: '7px'
                                    },
                                    title: 'Clips'
                                },
                                {
                                    type: 'numeric',
                                    fields: [
                                        'viewed'
                                    ],
                                    grid: true,
                                    position: 'left',
                                    title: 'Amount'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    renderer: function(sprite, config, rendererData, index) {

                                    },
                                    style: {
                                        minGapWidth: 1,
                                        minBarWidth: 60,
                                        maxBarWidth: 70,
                                        opacity: 0.80
                                    },
                                    xField: 'meta_id',
                                    yField: [
                                        'viewed',
                                        'glances'
                                    ]
                                }
                            ],
                            interactions: [
                                {
                                    type: 'panzoom'
                                }
                            ],
                            legend: {
                                xtype: 'legend'
                            }
                        }

As you can see in the above code I have a render function but I dont know what to put into it

Answer 1

Use tips for series

series: [
    {
        type: 'bar',

        tips: {
            trackMouse: true,
            width: 74,
            height: 38,
            renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title'));
            }
        },
        style: {
            minGapWidth: 1,
            minBarWidth: 60,
            maxBarWidth: 70,
            opacity: 0.80
        },
        xField: 'meta_id',
        yField: [
            'viewed',
            'glances'
        ]
    }
]