Clear Up
SharpKit Reference

Legend Class

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 showInLegend set to true.

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

  
legend: {
            position: 'right'
            },
            

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
            }
            }]
            });
            

Namespace: Ext.chart

Base Types

Constructors

Name Description
Legend(object) Creates new Legend.
Legend(LegendConfig)
Legend(Object[])

Fields

Name Description
boxFill Fill style for the legend box Defaults to: "#FFF"
boxStroke Style of the stroke for the legend box Defaults to: "#000"
boxStrokeWidth Width of the stroke for the legend box Defaults to: 1
boxZIndex Sets the z-index for the legend. Defaults to 100. Defaults to: 100
itemSpacing Amount of space between legend items Defaults to: 10
labelColor Color to be used for the legend labels, eg '#000' Defaults to: "#000"
labelFont Font to be used for the legend labels, eg '12px Helvetica' Defaults to: "12px Helvetica, sans-serif"
padding Amount of padding between the legend box's border and its items Defaults to: 5
position 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. Defaults to: "bottom"
update If set to true the legend will be refreshed when the chart is. This is useful to update the legend items if series are added/removed/updated from the chart. Default is true. Defaults to: true
visible Whether or not the legend should be displayed. Defaults to: true
x X-position of the legend box. Used directly if position is set to "float", otherwise it will be calculated dynamically. Defaults to: 0
y Y-position of the legend box. Used directly if position is set to "float", otherwise it will be calculated dynamically. Defaults to: 0

Properties

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

Methods

Name Description
toggle(bool) toggle
© Copyright 2005-2011 SharpKit. All rights reserved.