Charting > Special Topics > Drawing Reference Lines (referenceLines)

Drawing Reference Lines (referenceLines)

How to:

The referenceLines properties define one or more reference lines to draw on an axis.

Note: If an axis has an automatic scale, and you define a reference line at a value that is below the minimum or above the maximum value displayed on the scale, the scale will adjust its minimum or maximum value to make sure that the reference line is visible.

Syntax: How to Draw Reference Lines 

"referenceLines": [
   { 
   "value": number,
   "axis": "string",
   "line": {
      "color": "string",
      "width": number,
      "dash": "string"
   },
   "label": {
      "text": "string", 
      "font": "string",
      "color": "string"
   },
   "anchor": "string",  
   "showValue": boolean   }
]

where:

"value": number

Is a number or string that defines where on the axis to draw the line.

  • For a numeric axis, the number must be a value that is visible on the axis, and a string must represent a percentage between "0%" and "100%".
  • For the ordinal axis, a string must be a group label that is visible on the axis, and a number must be between 0 and 1 (for example, .5 will draw the reference line in the center of the chart).
"axis": "string"

Is a string that defines the axis on which to draw the line: "x", "y", "y2", or undefined (do not draw line).

"line":
Defines the properties of the reference line.
"color": "string"

Is a color defined by a color name or numeric specification string that defines the color of the line. The default is "black".

"width": number

Is a number that defines the width of the line in pixels. The default is 1.

"dash": "string"

Is a string that defines the dash style of the line. Use a string of numbers that defines the width of a dash followed by the width of the gap between dashes (for example, dash: "1 1" draws a dotted line). Use "" for a solid line.

"label":
Defines the properties of the reference line label.
"text": "string"

Is an optional string that defines the label to draw beside a reference line. Use "", or undefined Empty string, or undefined, to draw no label.

"font": "string"

Is a string that defines the size and type face of the label. The default is "7.5pt Sans-Serif".

"color": "string"

Is a color for the label defined by a color name or numeric specification string that defines the color of the label.

"anchor": "string"

Is a string that defines where to draw the reference label relative to the line. Valid values are: "start" (same side as axis labels) or "end" (opposite side).

  • "start", which draws the reference label on the same side as axis labels.
  • "end", which draws the reference label on the side opposite the axis labels. This is the default value.
"showValue": boolean

Enables or disables showing the reference line value. Valid values are:

  • true, to draw the value at the specified anchor location relative to the line.
  • false, to not draw the value. This is the default value.

Example: Drawing Reference Lines

The following request generates a vertical bar chart with two reference lines. The y-axis reference line is a red line drawn at the value 40,000, with a green label that shows the value as part of the label. The x-axis reference line is a green line drawn at the value Computers, with a red label that shows the value as part of the label: 

GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US MSRP_US COGS_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
"referenceLines": [
	{"value": 40000, "axis": "y",
		"line": {"color": "red", "width": 6, "dash": ""},
		"label": {"text": "Reference Line @:", 
			"font": "bold 8pt Sans-Serif", "color": "green"},
		"anchor": "end", "showValue": true},
	{"value": "Computers", "axis": "x",
		"line": {"color": "green", "width": 6, "dash": ""},
		"label": {"text": "Reference Line @:", 
			"font": "bold 8pt Sans-Serif", "color": "red"},
		"anchor": "end", "showValue": true}] 
*END
ENDSTYLE
END

The output is:

 WebFOCUS

Feedback