Howto format ExtJs chart axes?

Question

I create a ExtJs chart with the following code and unfortunately I do not know how to style the xAxis and yAxis. Could not find any help in the ExtJs documentation.

Ext.create('Ext.chart.Chart', {
       renderTo: div,
       theme: 'Browser:gradients',
       width: div.offsetWidth,
       height: div.offsetHeight,
       animate: true,
       store: store,
       axes: [
              {
                  title: 'Number of Ratings',
                  type: 'Numeric',
                  position: 'left',
                  fields: ['data1', 'data2', 'data3'],
                  minimum: 0,
                  tips: {
                      trackMouse: true,
                      width: 110,
                      height: 25,
                      renderer: function (storeItem, item) {
                          this.setTitle(storeItem.get('name');
                      }
                  },
              },
              {
                  title: 'Rating Categories',
                  type: 'Category',
                  position: 'bottom',
                  fields: ['name'],
              }
          ],
       series: [
                {
            type: 'column', 
            title: createLegendTitles(response.ratingResults),
            xField: 'name',
            yField: ['data1','data2', 'data3'],
        }
       ],
});

How can I format the xAxis and the yAxis of the chart? (eg setting colors, font size, font family, etc.)

Answer 1

Unfortunately, the Sencha documentation for this is either vague or incomplete. Sometimes, you'll end up finding a particular feature by viewing the chart examples. Other times, you have to go source diving. It's frustrating, I know.

It sounds like you're trying to customize the styles of the axis labels. There's a config called label (shown in the example code on the documentation for Ext.chart.axis.Axis , but not in the config). It takes an object of type Ext.chart.Label which itself has configs for color, font, orientation, a custom renderer function, rotation, display position, etc. You can get a summary here , but it too is rather incomplete.

If there's something else you're looking for, I can do what I can to point you in the right direction. I've spent hours looking over the source code for my own project at work looking for answers just like this.

EDIT: To edit the axis line itself, you may have to do some overriding/extending of the Ext.chart.axis.Axis class. At the bottom of the drawAxis method, there's some code that looks like this:

if (!me.axis) {
    me.axis = me.chart.surface.add(Ext.apply({
        type: 'path',
        path: path
    }, me.axisStyle));
}

It looks like that's where you want to add your code for applying styles to the axis. The me.axisStyle property doesn't actually get set in the Axis class as far as I can tell, so you'll have to hunt around for it. It may be a manual setting in the axis config, it may be generated by themes, or something else entirely.

Answer 2

This might work

axes: [
    {
        title: 'Number of Ratings',
        label: {
            renderer: function(v){
                return '<span class="numRatingsAxis">' + v + '</span>';
            }
        }
        ...
    }
]

Answer 3

I would like to supplement the answer here. If you're using the new sencha-charts package, you must put the renderer directly on the axis instead of inside of the label. Eg:

axes: [{
    title: 'Number of Ratings',
    renderer: function(v){
        return '<span class="numRatingsAxis">' + v + '</span>';
    }
}]

See https://docs.sencha.com/extjs/5.1/whats_new/5.0/charts_upgrade_guide.html#Renderers

Answer 4

我不认为有这个属性，但你可以使用CSS格式化它们。

Answer 5

You can do it by setting the theme on the chart, check out the charting guide:

http://docs.sencha.com/ext-js/4-0/#/guide/drawing_and_charting