Clear Up
SharpKit Reference

Axis Class

Defines axis for charts. The axis position, type, style can be configured. The axes are defined in an axes array of configuration objects where the type, field, grid and other configuration options can be set. To know more about how to create a Chart please check the Chart class documentation. Here's an example for the axes part: An example of axis for a series (in this case for an area chart that has multiple layers of yFields) could be:

  
axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data1', 'data2', 'data3'],
            title: 'Number of Hits',
            grid: {
            odd: {
            opacity: 1,
            fill: '#ddd',
            stroke: '#bbb',
            'stroke-width': 1
            }
            },
            minimum: 0
            }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Month of the Year',
            grid: true,
            label: {
            rotate: {
            degrees: 315
            }
            }
            }]
            

In this case we use a Numeric axis for displaying the values of the Area series and a Category axis for displaying the names of the store elements. The numeric axis is placed on the left of the screen, while the category axis is placed at the bottom of the chart. Both the category and numeric axes have grid set, which means that horizontal and vertical lines will cover the chart background. In the category axis the labels will be rotated so they can fit the space better.

Namespace: Ext.chart.axis

Constructors

Fields

Name Description
adjustEnd Whether to adjust the label at the end of the axis. Defaults to: true
dashSize The size of the dash marker. Default's 3. Defaults to: 3
grid The grid configuration enables you to set a background grid for an axis. If set to true on a vertical axis, vertical lines will be drawn. If set to true on a horizontal axis, horizontal lines will be drawn. If both are set, a proper grid with horizontal and vertical lines will be drawn. You can set specific options for the grid configuration for odd and/or even lines/rows. Since the rows being drawn are rectangle sprites, you can set to an odd or even property all styles that apply to Ext.draw.Sprite. For more information on all the style properties you can set please take a look at Ext.draw.Sprite. Some useful style properties are opacity, fill, stroke, stroke-width, etc. The possible values for a grid option are then true, false, or an object with { odd, even } properties where each property contains a sprite style descriptor object that is defined in Ext.draw.Sprite. For example:
axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data1', 'data2', 'data3'],
            title: 'Number of Hits',
            grid: {
            odd: {
            opacity: 1,
            fill: '#ddd',
            stroke: '#bbb',
            'stroke-width': 1
            }
            }
            }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Month of the Year',
            grid: true
            }]
            
length Offset axis position. Default's 0. Defaults to: 0
majorTickSteps If minimum and maximum are specified it forces the number of major ticks to the specified value. If a number of major ticks is forced, it wont search for pretty numbers at the ticks.
minorTickSteps The number of small ticks between two major ticks. Default is zero.
position Where to set the axis. Available options are left, bottom, right, top. Default's bottom. Defaults to: "bottom"
title The title for the Axis
width Offset axis width. Default's 0. Defaults to: 0

Methods

Name Description
drawAxis(object) Renders the axis into the screen and updates its position.
drawGrid() Renders an horizontal and/or vertical grid into the Surface.
drawLabel() Renders the labels in the axes.
setTitle(JsString) Updates the title of this axis.
© Copyright 2005-2011 SharpKit. All rights reserved.