Ext.chart.axis.Category

Hierarchy
Ext.chart.axis.AbstractExt.chart.axis.AxisExt.chart.axis.Category

A type of axis that displays items in categories. This axis is generally used to -display categorical information like names of items, month names, quarters, etc. -but no quantitative values. For that other type of information Number -axis are more suitable.

- -

As with other axis you can set the position of the axis and its title. For example:

- -

Ext.chart.axis.Category chart axis

- -

var store = Ext.create('Ext.data.JsonStore', {
-    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
-    data: [
-        {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
-        {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
-        {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
-        {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
-        {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}                                                
-    ]
-});
-
-Ext.create('Ext.chart.Chart', {
-    renderTo: Ext.getBody(),
-    width: 500,
-    height: 300,
-    store: store,
-    axes: [{
-        type: 'Numeric',
-        grid: true,
-        position: 'left',
-        fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
-        title: 'Sample Values',
-        grid: {
-            odd: {
-                opacity: 1,
-                fill: '#ddd',
-                stroke: '#bbb',
-                'stroke-width': 1
-            }
-        },
-        minimum: 0,
-        adjustMinimumByMajorUnit: 0
-    }, {
-        type: 'Category',
-        position: 'bottom',
-        fields: ['name'],
-        title: 'Sample Metrics',
-        grid: true,
-        label: {
-            rotate: {
-                degrees: 315
-            }
-        }
-    }],
-    series: [{
-        type: 'area',
-        highlight: false,
-        axis: 'left',
-        xField: 'name',
-        yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
-        style: {
-            opacity: 0.93
-        }
-    }]
-});
-

- -

In this example with set the category axis to the bottom of the surface, bound the axis to -the name property and set as title Month of the Year.

Defined By

Config Options

Other Configs

Ext.chart.axis.Axis
view source

dashSize : Number

The size of the dash marker. Default's 3.

Ext.chart.axis.Axis
view source

length : Number

Offset axis position. Default's 0.

Ext.chart.axis.Axis
view source

majorTickSteps : Number

If minimum and maximum are specified it forces the number of major ticks to the specified value.

Ext.chart.axis.Axis
view source

minorTickSteps : Number

The number of small ticks between two major ticks. Default is zero.

Ext.chart.axis.Axis
view source

position : String

Where to set the axis. Available options are left, bottom, right, top. Default's bottom.

Ext.chart.axis.Axis
view source

width : Number

Offset axis width. Default's 0.

Defined By

Properties

Ext.chart.axis.Category
view source

calculateCategoryCount : Boolean

Indicates whether or not to calculate the number of categories (ticks and -labels) when there is not enough room to di...

Indicates whether or not to calculate the number of categories (ticks and -labels) when there is not enough room to display all labels on the axis. -If set to true, the axis will determine the number of categories to plot. -If not, all categories will be plotted.

Ext.chart.axis.Category
view source

categoryNames : Array

A list of category names to display along this axis.

Defined By