docs/api/Ext.chart.Legend.html

   1 <!DOCTYPE html><html><head><title>Ext.chart.Legend | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.chart.Legend',
  13         docClass: 'Ext.chart.Legend',
  14         docReq: 'Ext.chart.Legend',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'Legend.html#Ext-chart.Legend';
  33     clsInfo = {"methods":["Legend"],"cfgs":["boxFill","boxStroke","boxStrokeWidth","boxZIndex","itemSpacing","labelFont","padding","position","visible","x","y"],"properties":["isVertical"],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Legend.html#Ext-chart.Legend" target="_blank">Ext.chart.Legend</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>Defines a legend for a chart's series.
  38 The 'chart' member must be set prior to rendering.
  39 The legend class displays a list of legend items each of them related with a
  40 series being rendered. In order to render the legend item of the proper series
  41 the series configuration object must have <code>showInSeries</code> set to true.</p>
  42
  43 <p>The legend configuration object accepts a <code>position</code> as parameter.
  44 The <code>position</code> parameter can be <code>left</code>, <code>right</code>
  45 <code>top</code> or <code>bottom</code>. For example:</p>
  46
  47 <pre class="prettyprint"><code>legend: {
  48     position: 'right'
  49 },
  50 </code></pre>
  51
  52 <p>Full example:</p>
  53
  54 <pre class="prettyprint"><code>    var store = Ext.create('Ext.data.JsonStore', {
  55         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  56         data: [
  57             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  58             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  59             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  60             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  61             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  62         ]
  63     });
  64
  65     Ext.create('Ext.chart.Chart', {
  66         renderTo: Ext.getBody(),
  67         width: 500,
  68         height: 300,
  69         animate: true,
  70         store: store,
  71         shadow: true,
  72         theme: 'Category1',
  73         legend: {
  74             position: 'top'
  75         },
  76          axes: [{
  77                 type: 'Numeric',
  78                 grid: true,
  79                 position: 'left',
  80                 fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  81                 title: 'Sample Values',
  82                 grid: {
  83                     odd: {
  84                         opacity: 1,
  85                         fill: '#ddd',
  86                         stroke: '#bbb',
  87                         'stroke-width': 1
  88                     }
  89                 },
  90                 minimum: 0,
  91                 adjustMinimumByMajorUnit: 0
  92             }, {
  93                 type: 'Category',
  94                 position: 'bottom',
  95                 fields: ['name'],
  96                 title: 'Sample Metrics',
  97                 grid: true,
  98                 label: {
  99                     rotate: {
 100                         degrees: 315
 101                     }
 102                 }
 103         }],
 104         series: [{
 105             type: 'area',
 106             highlight: false,
 107             axis: 'left',
 108             xField: 'name',
 109             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
 110             style: {
 111                 opacity: 0.93
 112             }
 113         }]
 114     });
 115     </code></pre>
 116
 117 <div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-boxFill" class="member f ni"><a href="Ext.chart.Legend.html#config-boxFill" rel="config-boxFill" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-boxFill" class="viewSource">view source</a></div><a name="boxFill"></a><a name="config-boxFill"></a><a href="Ext.chart.Legend.html#" rel="config-boxFill" class="cls expand">boxFill</a><span> : String</span></div><div class="description"><div class="short"><p>Fill style for the legend box</p>
 118 </div><div class="long"><p>Fill style for the legend box</p>
 119 </div></div></div><div id="config-boxStroke" class="member ni"><a href="Ext.chart.Legend.html#config-boxStroke" rel="config-boxStroke" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-boxStroke" class="viewSource">view source</a></div><a name="boxStroke"></a><a name="config-boxStroke"></a><a href="Ext.chart.Legend.html#" rel="config-boxStroke" class="cls expand">boxStroke</a><span> : String</span></div><div class="description"><div class="short"><p>Style of the stroke for the legend box</p>
 120 </div><div class="long"><p>Style of the stroke for the legend box</p>
 121 </div></div></div><div id="config-boxStrokeWidth" class="member ni"><a href="Ext.chart.Legend.html#config-boxStrokeWidth" rel="config-boxStrokeWidth" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-boxStrokeWidth" class="viewSource">view source</a></div><a name="boxStrokeWidth"></a><a name="config-boxStrokeWidth"></a><a href="Ext.chart.Legend.html#" rel="config-boxStrokeWidth" class="cls expand">boxStrokeWidth</a><span> : String</span></div><div class="description"><div class="short"><p>Width of the stroke for the legend box</p>
 122 </div><div class="long"><p>Width of the stroke for the legend box</p>
 123 </div></div></div><div id="config-boxZIndex" class="member ni"><a href="Ext.chart.Legend.html#config-boxZIndex" rel="config-boxZIndex" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-boxZIndex" class="viewSource">view source</a></div><a name="boxZIndex"></a><a name="config-boxZIndex"></a><a href="Ext.chart.Legend.html#" rel="config-boxZIndex" class="cls expand">boxZIndex</a><span> : Number</span></div><div class="description"><div class="short"><p>Sets the z-index for the legend. Defaults to 100.</p>
 124 </div><div class="long"><p>Sets the z-index for the legend. Defaults to 100.</p>
 125 </div></div></div><div id="config-itemSpacing" class="member ni"><a href="Ext.chart.Legend.html#config-itemSpacing" rel="config-itemSpacing" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-itemSpacing" class="viewSource">view source</a></div><a name="itemSpacing"></a><a name="config-itemSpacing"></a><a href="Ext.chart.Legend.html#" rel="config-itemSpacing" class="cls expand">itemSpacing</a><span> : Number</span></div><div class="description"><div class="short"><p>Amount of space between legend items</p>
 126 </div><div class="long"><p>Amount of space between legend items</p>
 127 </div></div></div><div id="config-labelFont" class="member ni"><a href="Ext.chart.Legend.html#config-labelFont" rel="config-labelFont" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-labelFont" class="viewSource">view source</a></div><a name="labelFont"></a><a name="config-labelFont"></a><a href="Ext.chart.Legend.html#" rel="config-labelFont" class="cls expand">labelFont</a><span> : String</span></div><div class="description"><div class="short"><p>Font to be used for the legend labels, eg '12px Helvetica'</p>
 128 </div><div class="long"><p>Font to be used for the legend labels, eg '12px Helvetica'</p>
 129 </div></div></div><div id="config-padding" class="member ni"><a href="Ext.chart.Legend.html#config-padding" rel="config-padding" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-padding" class="viewSource">view source</a></div><a name="padding"></a><a name="config-padding"></a><a href="Ext.chart.Legend.html#" rel="config-padding" class="cls expand">padding</a><span> : Number</span></div><div class="description"><div class="short"><p>Amount of padding between the legend box's border and its items</p>
 130 </div><div class="long"><p>Amount of padding between the legend box's border and its items</p>
 131 </div></div></div><div id="config-position" class="member ni"><a href="Ext.chart.Legend.html#config-position" rel="config-position" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-position" class="viewSource">view source</a></div><a name="position"></a><a name="config-position"></a><a href="Ext.chart.Legend.html#" rel="config-position" class="cls expand">position</a><span> : String</span></div><div class="description"><div class="short">The position of the legend in relation to the chart. One of: "top",
 132 "bottom", "left", "right", or "float". If set to ...</div><div class="long"><p>The position of the legend in relation to the chart. One of: "top",
 133 "bottom", "left", "right", or "float". If set to "float", then the legend
 134 box will be positioned at the point denoted by the x and y parameters.</p>
 135 </div></div></div><div id="config-visible" class="member ni"><a href="Ext.chart.Legend.html#config-visible" rel="config-visible" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-visible" class="viewSource">view source</a></div><a name="visible"></a><a name="config-visible"></a><a href="Ext.chart.Legend.html#" rel="config-visible" class="cls expand">visible</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Whether or not the legend should be displayed.</p>
 136 </div><div class="long"><p>Whether or not the legend should be displayed.</p>
 137 </div></div></div><div id="config-x" class="member ni"><a href="Ext.chart.Legend.html#config-x" rel="config-x" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-x" class="viewSource">view source</a></div><a name="x"></a><a name="config-x"></a><a href="Ext.chart.Legend.html#" rel="config-x" class="cls expand">x</a><span> : Number</span></div><div class="description"><div class="short"><p>X-position of the legend box. Used directly if position is set to "float", otherwise
 138 it will be calculated dynamically.</p>
 139 </div><div class="long"><p>X-position of the legend box. Used directly if position is set to "float", otherwise
 140 it will be calculated dynamically.</p>
 141 </div></div></div><div id="config-y" class="member ni"><a href="Ext.chart.Legend.html#config-y" rel="config-y" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-cfg-y" class="viewSource">view source</a></div><a name="y"></a><a name="config-y"></a><a href="Ext.chart.Legend.html#" rel="config-y" class="cls expand">y</a><span> : Number</span></div><div class="description"><div class="short"><p>Y-position of the legend box. Used directly if position is set to "float", otherwise
 142 it will be calculated dynamically.</p>
 143 </div><div class="long"><p>Y-position of the legend box. Used directly if position is set to "float", otherwise
 144 it will be calculated dynamically.</p>
 145 </div></div></div></div><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-isVertical" class="member f ni"><a href="Ext.chart.Legend.html#property-isVertical" rel="property-isVertical" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-property-isVertical" class="viewSource">view source</a></div><a name="isVertical"></a><a name="property-isVertical"></a><a href="Ext.chart.Legend.html#" rel="property-isVertical" class="cls expand">isVertical</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating.</p>
 146 </div><div class="long"><p>Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating.</p>
 147 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-Legend" class="member f ni"><a href="Ext.chart.Legend.html#method-Legend" rel="method-Legend" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.chart.Legend.html" class="definedIn docClass">Ext.chart.Legend</a><br/><a href="../source/Legend.html#Ext-chart.Legend-method-constructor" class="viewSource">view source</a></div><a name="Legend"></a><a name="method-Legend"></a><a href="Ext.chart.Legend.html#" rel="method-Legend" class="cls expand">Legend</a> : void</div><div class="description"><div class="short"><p>&nbsp;</p></div><div class="long">
 148 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 149 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>