Super classes

Ext.chart.series.Series Ext.chart.series.Cartesian

Sub classes

Ext.chart.series.Column

Creates a Bar Chart. A Bar Chart is a useful visualization technique to display quantitative information for different categories that can show some progression (or regression) in the dataset. As with all other series, the Bar Series must be appended in the *series* Chart array configuration. See the Chart documentation for more information. A typical configuration object for the bar series could be:

series: [{
        type: 'bar',
        axis: 'bottom',
        xField: 'name',
        yField: 'data1',
        highlight: true,
        label: {
            display: 'insideEnd',
            field: 'data1',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
           'text-anchor': 'middle'
        }
    }]

In this configuration we set `bar` as the series type, bind the values of the bar to the bottom axis and set the xField or category field to the `name` parameter of the store. We also set `highlight` to true which enables smooth animations when bars are hovered. We also set some configuration for the bar labels to be displayed inside the bar, to display the information found in the `data1` property of each element store, to render a formated text with the `Ext.util.Format` we pass in, to have an `horizontal` orientation (as opposed to a vertical one) and we also set other styles like `color`, `text-anchor`, etc.

Config Options

column : Boolean

Whether to set the visualization as column chart or horizontal bar chart.

groupGutter : Number

The gutter space between groups of bars, as a percentage of the bar width

gutter : Number

The gutter space between single bars, as a percentage of the bar width

listeners : Object

An (optional) object with event callbacks. All event callbacks get the target *item* as first parameter. The callback...

An (optional) object with event callbacks. All event callbacks get the target *item* as first parameter. The callback functions are:

itemmouseover
itemmouseout
itemmousedown
itemmouseup

renderer : Function

A function that can be overridden to set custom styling properties to each rendered element. Passes in (sprite, recor...

A function that can be overridden to set custom styling properties to each rendered element. Passes in (sprite, record, attributes, index, store) to the function.

shadowAttributes : Array

An array with shadow attributes

showInLegend : Boolean

Whether to show this series in the legend.

style : Object

Style properties that will override the theming series styles.

title : String

The human-readable name of the series.

type : String

The type of series. Set in subclasses.

xpadding : Number

Padding between the left/right axes and the bars

ypadding : Number

Padding between the top/bottom axes and the bars

Properties

axis : String

Indicates which axis the series will bind to

xField : String

The field used to access the x axis value from the items from the data source.

yField : String

The field used to access the y-axis value from the items from the data source.

Methods

drawSeries : Void

Draws the series for the current chart.

getItemForPoint( Number x, Number y ) : Object

For a given x/y point relative to the Surface, find a corresponding item from this series, if any. For Bar/Column ser...

For a given x/y point relative to the Surface, find a corresponding item from this series, if any. For Bar/Column series, this is the bar directly under the point.

Parameters

x : Number
y : Number

Returns

Object undefined

getLegendColor : Void

Returns a string with the color to be used for the series legend item.

hideAll : Void

Hides all the elements in the series.

showAll : Void

Shows all the elements in the series.

Sencha Documentation