Ext stacked bar chart label

2
votes

Using Ext 4, How do I make the label for a stacked bar chart cover the entire bar? I want my label to start at the beginning of the bar and extend across all sections, but currently, if the label does not fit in the first section of the bar alone, it will automatically start in the next section/last section.

This is the same code from the example in Ext.chart.series.bar, but changed to make it stacked. The bar labeled "2" doesn't fit in the first green section, so it gets shoved to the blue section.

enter image description here});

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
    { 'name': 'metric one',   'data':10 },
    { 'name': 'metric two',   'data': 7 },
    { 'name': 'metric three', 'data': 5 },
    { 'name': 'metric four',  'data': 2 },
    { 'name': 'metric five',  'data':27 }
]
});

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: 'insideStart',
        field: 'data',
        renderer: Ext.util.Format.numberRenderer('0'),
        orientation: 'horizontal',
        color: '#333',
        'text-anchor': 'middle'
    },
    stacked: true,
    xField: 'name',
    yField: ['data', 'data']
}]
3
extjsbar-chart

3 Answers

0
votes

You would need to express your data points in some form of ratio. Better still percentages. See below

var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data', 'data2'],
            data: [
                { 'name': 'metric one',   'data': 10/20,   'data2': 10/20 },
                { 'name': 'metric two',   'data': 7/17,   'data2': 10/17 },
                { 'name': 'metric three', 'data': 5/15,   'data2': 10/15 },
                { 'name': 'metric four',  'data': 2/12,   'data2': 10/12 },
                { 'name': 'metric five',  'data': 27/37,   'data2': 10/37 }
            ]
        });

        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: store,
            axes: [{
                type: 'Numeric',
                position: 'bottom',
                fields: ['data', 'data2'],
                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: 'insideStart',
                    field: 'data',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'horizontal',
                    color: '#333',
                    'text-anchor': 'middle'
                },
                stacked: true,
                xField: 'name',
                yField: ['data', 'data2']
            }]
        });
0
votes

try this.

{
              display: 'insideEnd',
              'text-anchor': 'middle',
                field: ['data1','data2','data3'],
                renderer: Ext.util.Format.numberRenderer('0,0'),
                orientation: 'vertical',
                color: '#333'
            }
0
votes

Display the y-axis value only if it is an integer 

yAxis: new Ext.chart.NumericAxis({

          displayName: 'Visits',
          labelRenderer: function(v) {
             // return a value only if it is an integer
             if(v.toString().indexOf(".") === -1){
                   return v;
             }
          }
    })