Controlling the Position of the Legend

How to:

The position property controls the location of the legend.


Top of page

x
Syntax: How to Control the Legend Position
legend: {position: 'pstring'}

where:

'pstring'

Is a string that defines the location of the legend. Valid values are:

  • 'bottom'. This is the default value.
  • 'free' (floating).

    Note: When legend position is set to "free", the legend may draw on top of other chart objects. Use the legend:xy property to define the location of the legend.

  • 'left'.
  • 'right'.
  • 'top'.


Example: Controlling the Legend Position

The following request against the GGSALES data source moves the legend to the left of the chart and draws a border around it:

GRAPH FILE GGSALES
SUM DOLLARS BUDDOLLARS UNITS BUDUNITS
BY PRODUCT
WHERE CATEGORY EQ 'Gifts'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
   legend: {
     position: 'left',
   lineStyle: {width: 2, color: 'indianred', dash: '4 4'}  
   },  
series: [
    {series: 0, color: 'lightgreen'},
    {series: 1, color: 'coral'},
    {series: 2, color: 'lightblue'},
    {series: 3, color: 'burlywood'} 
]
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
EN

The output is:

Changing the legend position to 'free' generates the following chart on which the legend is on top of some of the risers:

The position can be moved by specifying x and y locations for the legend:

legend: {
     position: 'free',  
    xy: {x:520, y:10},
    lineStyle: {width: 2, color: 'indianred', dash: '4 4'}
   }

The output is:


WebFOCUS