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