Controlling the Position of the Legend

Syntax: How to Control the Legend Position

"legend": {"position": position}

where:

"position": position

Can be a string that defines the location of the legend or a JSON object.

Valid values for a string are:

"bottom".
"left".
"right". This is the default value.
"top".
"auto". The chart engine positions the legend.

For more precise positioning, use a JSON object. The following properties are supported.

{
   "side": "string",
   "anchor": "string", 
  "align": "string",
   "excludeFromLayout": boolean
   "left": number,
   "right": number
   "top": number,
   "bottom": number
 }

where:

"side": "string": Can be one of "left", "right", "bottom", "top", or undefined.
"align": "string": For "side": "left" or "side": "right", this can be "top", "middle", or "bottom". For "side": "top" or "side": "bottom", this can be "left", "middle", "right".
"anchor": "string": Is the object used as an alignment reference for the legend. Can be one of "chartBackground", "chartFrame", or "chartAxisFrame". The default is "chartFrame".
"excludeFromLayout": boolean: Specifies whether space in the frame should be reserved for the legend. If it is set to true, the legend will not take space in the chart area, it will float above the chart. The default is false if the legend side is defined, true otherwise.
"left": number: If the legend is on the left, this defined the number of pixels between the anchor object and the left edge of the legend. If the legend is on the right, this is ignored.
"right": number: If the legend is on the right, this defined the number of pixels between the anchor object and the right edge of the legend. If the legend is on the left, this is ignored.
"top": number: If the legend is on the top, this is the number of pixels between the anchor object and the top edge of legend. If the legend is on the bottom, this is ignored.
"bottom": number: If the legend is on the bottom, tthis is the number of pixels between the anchor object and the bottom edge of legend. If the legend is on the top, this is ignored.

Example: Controlling the Legend Position Using a String

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

GRAPH FILE WF_RETAIL_LITE
SUM DISCOUNT_US GROSS_PROFIT_US REVENUE_US MSRP_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
*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
ENDSTYLE
END

The output is:

Example: Controlling the Legend Position Using a JSON Object

The following request positions the legend at the top left of the chart background, 5 pixels from the left edge and 10 pixels from the top edge. Space is reserved for the legend.

GRAPH FILE WF_RETAIL_LITE
SUM DISCOUNT_US GROSS_PROFIT_US REVENUE_US MSRP_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET STYLE *
type=data, column = discount_us, bucket = y-axis,$
type=data, column = gross_profit_us, bucket = y-axis,$
type=data, column = revenue_us, bucket = y-axis,$
type=data, column = msrp_us, bucket = y-axis,$
type=data, column = product_category, bucket = x-axis,$
*GRAPH_JS
"xaxis":{"majorGrid": {"visible": false},
        "minorGrid": {"visible": false}},
"yaxis":{"majorGrid": {"visible": false},
         "minorGrid": {"visible": false}},
"legend": {
"position": 
 {
   "side": "left",
   "align": "top",
   "anchor": "chartBackground", 
   "excludeFromLayout": false,
   "left": 5,
   "top": 10,
 },
"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
ENDSTYLE
END

The output is shown in the following image.

	WebFOCUS