Как отобразить подсказки на групповой линейной диаграмме в Extjs 4?

Question

Я использую EXTJS 4.0 и хочу отображать подсказки, когда пользователь переходит на мою линию Графики. Я уже создал групповую диаграмму, а также создаю Rich Tips, но теперь моя проблема заключается в том, когда я создаю советы для каждой серии и запускаю в браузере я получил пустые подсказки для трехстрочной диаграммы из четырех, но четвертая линейная диаграмма отображает правильные богатые подсказки. Мой пример кода:

Код для панельных и линейных графиков:

var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
    width: 800,
    height: 600,
    hidden: false,
    id:'ChequesDetailsChartsMonthWiseWinId',
    title: 'Line Chart',
    renderTo: Ext.getBody(),
    layout: 'fit',
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: ChequesDetailsLineChartsMonthwiseStore,
        shadow: true,
        theme: 'Category1',
        legend: {
            position: 'right'
        },
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
            title: 'Amounts (In Rs)',
            minorTickSteps: 1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 0.5
                }
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['month'],
            title: 'Month of the Year'
        }],
        series: [{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'month',
            yField: 'Honorarium',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
             tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');

                    this.setTitle("Information for " + 'Honorarium  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'month',
            yField: 'Program Expenses',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
                 tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');

                    this.setTitle("Information for " + 'Program Expenses  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
          //  fill: true,
            xField: 'month',
            yField: 'Assets Amount',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
             tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');

                    this.setTitle("Information for " + 'Assets Amount  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
           // fill: true,
            xField: 'month',
            yField: 'Human Resource',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
            tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');

                    this.setTitle("Information for " + 'Human Resource  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }]
    }
});

И образец предварительного просмотра: Линейная диаграмма:

Линейная диаграмма:

Пожалуйста, дайте мне решение, как отображать подсказки на всех графиках или где я делаю неправильно.