Formatting the Mouse Over Indicator (mouseOverIndicator)

How to:

Format the Mouse Over Indicator

The mouseOverIndicator property defines a color to highlight the riser when the mouse hovers over a riser. For line, combo, and pareto charts, the marker property defines a marker to draw when the mouse hovers over a line riser.

For line charts with no markers (series:#, marker:{visible:false}), one marker is added to the line at the point on the line nearest to the cursor. This marker is created with the properties defined by mouseOverIndicator:marker (not the series-dependent marker).
For line charts with markers (series:#,marker:{visible:true}) and scatter charts, the series-defined marker nearest to the cursor will be drawn as larger (zoomed). The appearance of this border cannot be controlled, and can only be disabled by setting mouseOverIndicator:enabled to false.
Markers on bubble charts are drawn with a grey border. They do not zoom. The marker size is dependent on the data.
For other chart types (such as bar, area, pie, tagcloud, treemap, and heatmap), the standard highlight defined by mouseOverIndicator:color is used, and no markers.

The following code shows the properties and default values for the indicator:

"mouseOverIndicator": {
	"enabled": true,
	"marker": {
		"color": "red",
		"size": 25,
		"shape": "square",
		"rotation": 0,
		"border": {"width": 1, "color": "darkblue"}
		}}

Syntax: How to Format the Mouse Over Indicator

"mouseOverIndicator": {
	"enabled": boolean,
   "color": "string",  
   "marker": {
      "color": "string", 
      "size": number,
      "shape": "string",
      "rotation": number,
      "border": {
         "width": number,
         "color": "string",
         "dash": "string"
      }
   }
},

where:

"enabled": boolean

Enables or disables the mouse over indicator. Valid values are:

true, which enables the mouse over indicator. This is the default value.
false, which disables the mouse over indicator.

"color": "string"

Defines a color to apply when the mouse hovers over a riser. A color can be defined by a color name or numeric specification string. It can also be defined as a percentage string in the range "100%" to "100%", to lighten or darken the series color by the specified percentage. The default value is undefined or the string "".

"marker":

Defines the properties of markers for a line riser.

"color": "string"

Defines the marker color for a line riser (in line, combo or pareto charts). It can be a color defined by a color name or numeric specification string. The default value is "lightblue".

"size": number

Is a number that defines the size of the marker. The default value is 5.

"shape": "string"

Is a string that defines the shape of a marker. The default value is "square".

For information about marker shapes, see Series-Specific Properties.

"rotation": number

Is a number between 0 and 360 that defines the angle (in degrees) of the marker. The default value is zero (0).

"border":

Defines the properties of the marker border.

"width": number: Is a number that defines the width of the marker border in pixels. The default value is 1.
"color": "string": Is a color for the marker border defined by a color name or numeric specification string. The default value is "darkblue".
"dash": "string": Is a string that defines the border dash style. Use a string of numbers that defines the width of a dash followed by the width of the gap between dashes. The default value is "" (which draws a solid line).

Example: Formatting the Mouse Over Indicator

The following request generates a vertical line chart with two series. Series 0 has no markers and series 1 has default markers. The mouse over indicator is defined as red, and the marker shape for lines with no markers is a six-pointed star with a dark blue border:

GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US 
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET STYLE *
*GRAPH_JS
series:[
"series": [
	{"series": 0, "color": "blue", "marker": {"visible": false}},
	{"series": 1, "color": "green"}],
"mouseOverIndicator": {
	"enabled": true,
	"marker": {
		"color": "red", "size": 35, "shape": "sixStar", "rotation": 0,
		"border": {"width": 1, "color": "darkblue"}}}
*END
ENDSTYLE
END

The following image shows the mouse over indicator on the line that had no markers:

The following request generates a vertical bar chart and makes the mouse over indicator red:

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
"mouseOverIndicator": {"enabled": true, "color": "red"}     
*END
ENDSTYLE
END

The following image shows the how a riser becomes red when the mouse hovers over it:

	WebFOCUS