How do I get a ExtJS 4.1.X Bar Chart with a single bar to show that bar's label properly? How do I get a ExtJS 4.1.X Bar Chart with a single bar to show that bar's label properly? javascript javascript

How do I get a ExtJS 4.1.X Bar Chart with a single bar to show that bar's label properly?


One solution is to replace

axisRange = to - from,

on line 383 of Axis.js in ExtJS with

axisRange = to - from == 0 ? 1 : to - from,

to prevent a divide by zero being assigned to the y coordinate of theaxis label.


Yes, the default rendering does look weird when it is just one record.
It can be fixed or worked around though.

In concept, override the series renderer to fix the height and y point in case of single record -

renderer: function(sprite, record, attr, index, store) {    if (store.getCount() == 1) {        attr.height = 80;        attr.y = 75;    }    return attr;}

enter image description here

You can make changes to the actual overridden values (attr.height and attr.y) to suit your visual needs.

Here is your example modified to look close to what you would expect.

var store = Ext.create('Ext.data.JsonStore', {    fields: ['name', 'data'],    data: [        {'name': 'metric one','data': 5}        //,{'name': 'metric two','data': 7}    ]});Ext.create('Ext.chart.Chart', {    renderTo: Ext.getBody(),    width: 500,    height: 300,    animate: true,    store: store,    axes: [{        type: 'Numeric',        position: 'bottom',        fields: ['data'],        label: {            renderer: Ext.util.Format.numberRenderer('0,0')        },        title: 'Sample Values',        grid: true,        minimum: 0},    {        type: 'Category',        position: 'left',        fields: ['name'],        title: 'Sample Metrics'}],    series: [{        type: 'bar',        axis: 'bottom',        highlight: true,        tips: {            trackMouse: true,            width: 140,            height: 28,            renderer: function(storeItem, item) {                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');            }        },        label: {            display: 'insideEnd',            field: 'data',            renderer: Ext.util.Format.numberRenderer('0'),            orientation: 'horizontal',            color: '#333',            'text-anchor': 'middle'        },        xField: 'name',        yField: 'data',        renderer: function(sprite, record, attr, index, store) {            if (store.getCount() == 1) {                attr.height = 80;                attr.y = 75;            }            return attr;        }}]});​


If it seems right, just change the height to 150 from 300 :

Ext.create('Ext.chart.Chart', {    renderTo: Ext.getBody(),    width: 500,    height: 150,