CODEWITHSUNDEEP
extjsextjs4
liuyanghejerry
liuyanghejerry

Reputation: 3871

extjs4 : how to custom axis label in each word

I'm using extjs 4 now, with its Ext.chart.axis.Category.

But how to custom the label in each word?

Say, I have 72 numbers in the label at the bottom of the axis, and I want bold 24 and 48 only.

I've checked the Ext.chart.Label, and did found there's a useful function called renderer. But it is only used for text change, not a style change.

My example code snippet:

{
    xtype: 'chart',
    id: 'monitorAmmeter72chart',
    animate: false,
    region: 'center',
    store:Ext.data.StoreManager.lookup('monitorAmmeter72Store'),
    axes: [
        {
            type: 'Category',
            fields: ['hourDis'],
            position: 'bottom',
            title: 'blablabla',
            grid: true,
            label:{
                renderer:function(v){
                    if(v == '24'){
                        return '<b>24</b>';//Note, this won't work.
                    }else{
                        return v;
                    }
                }
            }
        },
        {
            type: 'Numeric',
            fields: ['data'],
            position: 'left',
            title: 'another blablabla',
            grid: true,
            minimum: 0
        }
    ],
     series: [
        {
            type: 'column',
            axis: 'left',
            highlight: false,
            tips: {
              trackMouse: false,
              width: 50,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('data') + ' xx');
              }
            },
            style: {
                fill: '#38B8BF'
            },
            gutter: 20,
            xField: 'hour',
            yField: 'data'
        }
    ]
}

Upvotes: 3

Views: 4989

Answers (2)

MarcAndre
MarcAndre

Reputation: 116

i'm using extjs 4.2.1 and i'm doing : 

label: {
 renderer: function(v) {
  if(v == 'Capitale-Nationale'){
   this.font = "bold 12px Arial, Helvetica, sans-serif";
   this.padding = 5;
  }
  else{
   this.font = "12px Arial, Helvetica, sans-serif";
   this.padding = 5;
  }
  return v;
 }
},

Upvotes: 3

Andrey Selitsky
Andrey Selitsky

Reputation: 2604

You could actually create a HTML string in the renderer and style it as you need. Isn't it an option?

Upvotes: 0

Related Questions