Reversing the Default Axis Locations

How to:

The swapChartSide property controls the location of the axis body line and labels. In the default configuration, the y-axis body line and labels appear on the bottom of a horizontal chart and the left side of a vertical chart. The y2-axis body line and labels appear on the top of a horizontal chart and the right side of a vertical chart. In Bubble and Scatter charts, the x-axis normally appears on the bottom of the chart and the y-axis on the left side of the chart. This property can be used to reverse these default locations.

Top of page
x
Syntax: How to Reverse Default Axis Locations
axisname: {
  swapChartSide: boolean  }

where:

axisname

Can be:

  • xaxisOrdinal
  • xaxisNumeric
  • yaxis
boolean

Can be:

  • true, which swaps axis label and body line locations.
  • false, which uses the default axis locations. This is the default value.
Example: Reversing the Default Axis Positions

The following request against the GGSALES data source assigns series 3 to the y2-axis and swaps the y2-axis with the y-axis: 

GRAPH FILE GGSALES
SUM DOLLARS UNITS BUDDOLLARS BUDUNITS 
BY CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
yaxis: {title: {visible: true, color: 'red', font: 'bold 10pt Verdana',text: 'Y-AXIS'},
  bodyLineStyle: {width: 2, color: 'red'},
  swapChartSide: true},
y2axis: {title: {visible: true, color: 'red', font: 'bold 10pt Verdana',text: 'Y2-AXIS'},
  bodyLineStyle: {width: 2, color: 'green'}},
series: [
  {series: 0, color: 'cyan'},
  {series: 1, color: 'tan'},
  {series: 2, color: 'lightblue'}, 
  {series: 3, color: 'teal', yAxisAssignment: 2}]
*END
ENDSTYLE
END

On the output, the y-axis has been moved to the right side of the chart, and the y2-axis is on the left:

The following request generates a bubble chart with the y-axis on the right, and the x-axis on the top:

GRAPH FILE GGSALES
SUM  UNITS BUDUNITS 
AND COMPUTE
MUNITS = UNITS;
BY PRODUCT
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BUBBLE
ON GRAPH SET STYLE *
*GRAPH_JS
yaxis: {swapChartSide: true},
xaxisNumeric: {swapChartSide: true},
series: [
    {series: 'all', marker: {shape: 'circle'}},
    {series: 0, color: 'red'}, 
    {series: 1, color: 'green'}, 
    {series: 2,  color: 'blue'} 
]
*END
INCLUDE=ENIADefault_combine.sty,$
ENDSTYLE
END

The output is:

WebFOCUS