For up to date documentation and features, visit http://docs.sencha.com/ext-js/4-0

## Sencha Documentation

# Ext.chart.Legend

Defines a legend for a chart's series. The 'chart' member must be set prior to rendering. The legend class displays a list of legend items each of them related with a series being rendered. In order to render the legend item of the proper series the series configuration object must have `showInSeries` set to true.

The legend configuration object accepts a `position` as parameter. The `position` parameter can be `left`, `right` `top` or `bottom`. For example:

    legend: {
        position: 'right'
    },

Full example:

        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,
            animate: true,
            store: store,
            shadow: true,
            theme: 'Category1',
            legend: {
                position: 'top'
            },
             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
                }
            }]
        });

Defined By

### Config Options

#### Other Configs

Ext.chart.Legend
view source
boxFill : String

Fill style for the legend box

Fill style for the legend box

Ext.chart.Legend
view source
boxStroke : String

Style of the stroke for the legend box

Style of the stroke for the legend box

Ext.chart.Legend
view source
boxStrokeWidth : String

Width of the stroke for the legend box

Width of the stroke for the legend box

Ext.chart.Legend
view source
boxZIndex : Number

Sets the z-index for the legend. Defaults to 100.

Sets the z-index for the legend. Defaults to 100.

Ext.chart.Legend
view source
itemSpacing : Number

Amount of space between legend items

Amount of space between legend items

Ext.chart.Legend
view source
labelFont : String

Font to be used for the legend labels, eg '12px Helvetica'

Font to be used for the legend labels, eg '12px Helvetica'

Ext.chart.Legend
view source
padding : Number

Amount of padding between the legend box's border and its items

Amount of padding between the legend box's border and its items

Ext.chart.Legend
view source
position : String
The position of the legend in relation to the chart. One of: "top", "bottom", "left", "right", or "float". If set to ...

The position of the legend in relation to the chart. One of: "top", "bottom", "left", "right", or "float". If set to "float", then the legend box will be positioned at the point denoted by the x and y parameters.

Ext.chart.Legend
view source
visible : Boolean

Whether or not the legend should be displayed.

Whether or not the legend should be displayed.

Ext.chart.Legend
view source
x : Number

X-position of the legend box. Used directly if position is set to "float", otherwise it will be calculated dynamically.

X-position of the legend box. Used directly if position is set to "float", otherwise it will be calculated dynamically.

Ext.chart.Legend
view source
y : Number

Y-position of the legend box. Used directly if position is set to "float", otherwise it will be calculated dynamically.

Y-position of the legend box. Used directly if position is set to "float", otherwise it will be calculated dynamically.

Defined By

### Properties

Ext.chart.Legend
view source
isVertical : Boolean

Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating.

Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating.

Defined By

### Methods

Ext.chart.Legend
view source
Legend : void

### Returns

- void