View Full Version : How to change y-axis to display small value in Column chart

10 Feb 2014, 1:00 PM

I have a column chart that adjust the maximum and minimum based on the data, but when the value is ranges from -0.05 to 0.05, the y-axis interval is range from -1 to 1. It only select the next whole number to be the range. This will make any column with a small value barely visible on the screen. Is there a way to set the auto range to select the next small interval than a whole number.

This is when I use the legend to filter the data. Another way I am thinking is capture the legend click and set the max and min on manually. Is it possible to capture the legend click event?

11 Feb 2014, 6:21 AM
Any idea?

11 Feb 2014, 3:22 PM
Perhaps an example to display what you are facing? Paste the following code in our fiddle and save to get a link you can send:

name : 'Fiddle',

launch : function() {

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': -1.00 },
{ 'name': 'metric two', 'data': 0.05 },
{ 'name': 'metric three', 'data': 1.00 },
{ 'name': 'metric four', 'data': 0.10 },
{ 'name': 'metric five', 'data': -0.23 }

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
title: 'Sample Values',
grid: true,

maximum: 5,
minimum: -5,
majorTickSteps: 10

type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
series: [
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
xField: 'name',
yField: 'data'


13 Feb 2014, 11:44 AM

When I filtered data2, data1 barely fills up the table. Is there anyway I can get y-axis smaller but can be changes dynamically?

Also, is it possible to turn off some of the legend by default so the user needs to click on it to display some column

13 Feb 2014, 12:29 PM
We do not have dynamic scaling at this time. You can adjust the majorTickSteps to help a little, but it will not give you the result you are looking for. The larger values will consume the axis.