Column Chart axes does not render properly

[cahello]

I have the following json data:

{data: [
{ "name": "Thu", "failure": 0, "success": 0},
{ "name": "Wed", "failure": 0, "success": 0},
{ "name": "Tue", "failure": 0, "success": 3},
{ "name": "Mon", "failure": 0, "success": 0},
{ "name": "Sun", "failure": 0, "success": 3},
{ "name": "Sat", "failure": 0, "success": 0},
{ "name": "Fri", "failure": 0, "success": 0}
]
}

When the column chart is rendered, the axes is not numbered correctly. What might be wrong? The code for the chart is:

ch= Ext.create('Ext.chart.Chart', {
		width: 600,
		height: 300,
		region: 'center',
		insetPadding: 80,
		theme: 'Coloredlegend', //this is to set the green and red colors for the success and failure
		animate: true,
		store: store,
		legend: {
			position: 'right',
			yField: 'success',
			//style: {color: 0x34ff0a},
            yField: 'failure',
			//style: {color: 0xd4ff51},
		},
		axes: [
				{
					   type: 'Numeric',
			    	   position: 'left',
			    	   fields: ['failure'],
					   label: {
						   renderer: Ext.util.Format.numberRenderer('0,0')
					   },
					   title: 'Failed Data',
					   minimum: 0
				},
		       {
				   type: 'Numeric',
				   position: 'left', 
				   fields: ['success'],
		    	   label: {
		    		   renderer: Ext.util.Format.numberRenderer('0,0')
		    	   },
		    	   title: 'Test', 
		    	   grid: true,
				   minimum: 0
		    	  
		       },
		       {
		    	   type: 'Category',
		    	   position: 'bottom',
		    	   fields: ['name'],
		    	   
		       }
		       ],
		       series: [


		                {
		                	type: 'column',
		                	axis: 'left', 
		                	highlight: true,
		                	tips: {
		                		trackMouse: true,
		                		width: 140,
		                		height: 28,		         	
		                		renderer: function(storeItem, item) {
		                			this.setTitle(storeItem.get('name') + ': ' + item.value[1]);
		                		}
		                	},
		                	label: {
		                		display: 'insideEnd',
		                		'text-anchor': 'middle',
		                		field: ['success', 'failure'],
		                		renderer: Ext.util.Format.numberRenderer('0'),
		                		orientation: 'vertical',
		                		color: '#333'
		                	},
		                	xField: 'name',
		                	yField: ['success','failure'],
		                	showInLegend: true,
		                },		               
		                ]
	});

I have also attached an example snapshot.

[mitchellsimoens]

What Ext JS 4 version are you using?

[Brett Hannah]

Hi Cahello,

The issue is that you have two axes bound to the left. Both are being drawn and that is why you have the strange numbering.

You need to remove one of the 'left' axes leaving only one axis but setting:
fields: ['success','failure']

That should sort it.

Brett Hannah
LinkedIn
EdgeUX