Controlling the X-Axis Label Layout

How to:

the xaxis:labelLayout properties control whether the x-axis can scroll and whether labels can be staggered, skipped, and truncated.

Syntax: How to Control the X-Axis Label Layout

xaxis: {
         labelLayout: {
             stagger: boolean,
             skip: boolean,
             scroll: boolean,
             truncate: boolean                }
      }

where:

labelLayout:

Defines the x-axis label layout.

stagger: boolean

Controls whether labels can be staggered.

Note: Generally, only x-axis labels can be staggered.

Valid values are:

  • 'auto', which leaves the decision up to the chart engine. This is the default value.
  • true, which enables staggered labels, if necessary for the spacing of the labels.
  • false, which disables staggered labels.
skip: boolean

Controls whether labels can be skipped, Valid values are:

  • 'auto', which leaves the decision up to the chart engine. This is the default value.
  • true, which enables skipped labels, if necessary for the spacing of the labels.
  • false, which disables skipped labels.
scroll: boolean

Controls whether the x-axis can be scrolled, Valid values are:

  • 'auto', which leaves the decision up to the chart engine. This is the default value.
  • true, which enables scrolling, if necessary for the spacing of the groups.
  • false, which disables scrolling.
truncate: boolean

Controls whether labels can be truncated, Valid values are:

  • 'auto', which leaves the decision up to the chart engine. This is the default value.
  • true, which enables truncated labels, if necessary for the spacing of the labels.
  • false, which disables truncated labels.

Example: Controlling the Layout of X-Axis Labels

The following request uses the default x-axis label layout:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US MSRP_US REVENUE_US
BY PRODUCT_SUBCATEG
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
*GRAPH_JS
legend: {visible:false},
xaxis: {
         labelLayout: {
                stagger: 'auto',
                skip: 'auto',
                scroll: 'auto',
                truncate: 'auto'
                           }         }
*END
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N4, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N5, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $ 
ENDSTYLE
END

The output is shown in the following image:

Changing the stagger property to true generates the following chart:

WebFOCUS

Feedback