How to disable the initial chart.legend (one of the graph parameters)

This is my chart and when it is loaded I want data3 to be disabled and when I click on it in the bottom bar then only I want it to get enabled.




Ext.application({ launch: function () { var chart = new Ext.chart.Chart({ animate: true, store: { fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], data: [{ 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 }, { 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 }, { 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 }, { 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 }, { 'name': 'metric five', 'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }] }, legend: { position: 'bottom' }, axes: [{ type: 'numeric', position: 'left', fields: ['data1'], title: { text: 'Sample Values', fontSize: 15 }, grid: true, minimum: 0 }, { type: 'category', position: 'bottom', fields: ['name'], title: { text: 'Sample Values', fontSize: 15 } }], series: [{ type: 'area', title: ['Data1', 'Data2', 'Data3'], subStyle: { fill: ['blue', 'green', 'red'] }, xField: 'name', yField: ['data1', 'data2', 'data3'] }] }); Ext.Viewport.setLayout('fit'); Ext.Viewport.add(chart); }});