Clear Up
SharpKit Reference

Area Class

Creates a Stacked Area Chart. The stacked area chart is useful when displaying multiple aggregated layers of information. As with all other series, the Area Series must be appended in the series Chart array configuration. See the Chart documentation for more information. A typical configuration object for the area series could be:

var store = Ext.create('', {
            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 configuration we set area as the type for the series, set highlighting options to true for highlighting elements on hover, take the left axis to measure the data in the area series, set as xField (x values) the name field of each element in the store, and as yFields (aggregated layers) seven data fields from the same store. Then we override some theming styles by adding some opacity to the style object.

Namespace: Ext.chart.series



Name Description
drawSeries() Draws the series for the current chart.
highlightSeries(object) Highlight this entire series.
unHighlightItem(object) Un-highlights the specified item. If no item is provided it will un-highlight the entire series.
unHighlightSeries(object) UnHighlight this entire series.


Name Description
style Append styling properties to this object for it to override theme properties. Defaults to: {}
© Copyright 2005-2011 SharpKit. All rights reserved.