Styling Nested Label Connector Lines

How to:

Style Nested Label Connector Lines

When you assign multiple sort fields to the x-axis, by default, the x-axis is drawn using a nested layout, where the hierarchy of sort fields is presented on the x-axis. The hierarchical relationships between the sort fields is depicted with connector lines. You can control the color, width, and dash style of these connector lines using the xaxis:labels:nestingLineStyle properties.

Syntax: How to Style Nested Label Connector Lines

xaxis: {
    labels: {
        nestingLineStyle: {
            width: lwidth,
            color: 'lcolor',
            dash: 'ldstring'
        }
    }
}

where:

lwidth: Is the width of the line in pixels. The default value is 1.
'lcolor': Is a color specification string that defines the color of the line. The default value is 'black'.
'ldstring': Is a string that defines the dash style. The default value is '' (which generates a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

Example: Styling Nested Label Connector Lines

The following request makes the nested label connector lines 2 pixels wide, blue, and dashed.

GRAPH FILE WF_RETAIL_LITE
SUM DAYSDELAYED
BY TIME_DATE_QTR
BY TIME_DATE_MONTH
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR       
ON GRAPH SET STYLE *
TYPE=DATA, COLUMN=DAYSDELAYED, BUCKET=y-axis, $
TYPE=DATA, COLUMN=TIME_DATE_QTR, BUCKET=x-axis, $ 
TYPE=DATA, COLUMN=TIME_DATE_MONTH, BUCKET=x-axis, $ 
*GRAPH_JS
xaxis: {labels: {
           nestingLineStyle: {
            width: 2,
            color: 'blue',
            dash: '3 3'       
             }
          }   
   }
*END 
ENDSTYLE
END

The output is shown in the following image.

	WebFOCUS