Creating a checkbox to hide or show labels in a ExtJS 4 Chart

Question

I've created a chart as the code below, and a also have a checkbox with a handler function that I want to show or hide the chart labels depending on its status. My question is, how do I make the labels hidden without also hiding the actual chart values?

// checkbox handler code
handler: function() {
    if(Ext.getCmp('chk_showLabels').getValue()) {
        // function to show labels here
    } else {
        // function to hide labels here
    }
} 
// Chart code
{
xtype : 'chart',
animate : true,
id : 'chart',
width : 996,
height : 432,
shadow : false,
store : volumes,
theme : 'Category1',
axes : [{
        type : 'Numeric',
        position : 'right',
        fields : ['participacao'],
        title : 'Percentual',
        label : {
            renderer : Ext.util.Format.numberRenderer('0.00%')
        }
    }, {
        type : 'Numeric',
        position : 'left',
        grid : true,
        fields : ['volume'],
        title : 'Volume',
        label : {
            renderer : Ext.util.Format.numberRenderer('0./i')
        }

    }, {
        type : 'Category',
        position : 'bottom',
        fields : ['data'],
        label : {
            rotate : {
                degrees : 270
            }
        }
    }
],
series : [{
        type : 'column',
        axis : 'right',
        xField : 'data',
        yField : ['participacao']
    }, {
        type : 'line',
        axis : 'right',
        xField : 'data',
        yField : ['participacao'],
        smooth : true,
        fill : true,
        style : {
            opacity : .1
        },
        label : {
            renderer : Ext.util.Format.numberRenderer('0./i')

        },
        markerConfig : {
            type : 'circle',
            size : 5
        },
        tips : {
            trackMouse : true,
            width : 148,
            height : 36,
            renderer : function (storeItem, item) {
                this.setTitle('Participação: ' + Ext.util.Format.number(storeItem.get('participacao'), "0.00") + '% \n Volume: ' + storeItem.get('volume'));
            }
        }
    }
]
}

Thanks a lot

Answer 1

This is an odd way, but it works somehow.

Give an ID to the label you want it to Show/Hide like this: (All labels will have the same ID. We can't give them Class attribute here according to my knowledge. But it works with an ID. Maybe it's because of they're SVGs)

label: {
    renderer : Ext.util.Format.numberRenderer('0.00%'),
    id: 'myLabel'
}

And your checkbox handler:

handler: function(obj) {
    if( obj.checked ) {
        Ext.select('#myLabel').each(function(item){
            item.setVisible(false);
        });
    } else {
        Ext.select('#myLabel').each(function(item){
            item.setVisible(true);
        });
    }
}