Axis Properties Overview

The axis properties control the appearance of chart axes (xaxis, yaxis, y2axis, zaxis). An axis can be numeric or ordinal (text strings) depending on the data that is supplied to draw the chart. The y2axis only appears in pareto charts and Bar, Line, and Area charts where the series yAxisAssignment property assigns a series to the y2axis. The zaxis only appears on 3D charts and heatmap charts.

The following code segment shows the default settings:

xaxis: {
  mode: undefined, 
  min: undefined,
  max: undefined,
  intervalMode: undefined, 
  intervalValue: undefined,
  bIsLog: false,
  numberFormat: 'auto',
  swapChartSide: false,
  invert: false,
  altFrameColor: undefined,  
  colorBands: [], 
  title: {
    text: the WebFOCUS column title,
    visible: false,
    font: 'bold 9pt Sans-Serif',
    color: 'black'
  },
  labels: {
    visible: true,
    font: '7.5pt Sans-Serif',
    color: 'black',
    excludeMin: false,
    excludeMax: false,
    rotation: undefined 
  },
  baseLineStyle: {
    width: 1, 
    color: 'black',
    dash: ''
  },
  bodyLineStyle: {
    width: 1, 
    color: 'transparent',
    dash: ''
  },
  majorGrid: {
    visible: true,
    aboveRisers: true,
    lineStyle: {
      width: 1,
      color: 'rgba(255, 255, 255, 0.3)',
      dash: ''
    },
    ticks: {
      length: 5,
      visible: true,
      style: 'inner', 
      lineStyle: {
        width: 1,
        color: 'black'
      }
    }
  },
  minorGrid: {
    visible: false,
    count: undefined,  
    lineStyle: {
      width: 1,
      color: 'black',
      dash: ''
    },
    ticks: {
      length: 5,
      visible: false,
      style: 'inner', 
      lineStyle: {
        width: 1,
        color: 'black'
      }
    }
  },
  },
yaxis: {
  mode: undefined, 
  min: undefined,
  max: undefined,
  intervalMode: undefined, 
  intervalValue: undefined, 
  bIsLog: false,
  numberFormat: 'auto',
  swapChartSide: false,
  invert: false,
  altFrameColor: undefined,  
  colorBands: [],  
  title: {
    text: 'Y Axis Title',
    visible: false,
    font: 'bold 9pt Sans-Serif',
    color: 'black'
    position:'orthogonal'
},
  labels: {
    visible: true,
    font: '7.5pt Sans-Serif',
    color: 'black',
    excludeMin: false,
    excludeMax: false,
    rotation: undefined 
  },
  baseLineStyle: {
    width: 1, 
    color: 'black',
    dash: ''
  },
  bodyLineStyle: {
    width: 1, 
    color: 'transparent',
    dash: ''
  },
  majorGrid: {
    visible: true,
    aboveRisers: true,
    lineStyle: {
      width: 1,
      color: 'rgba(255, 255, 255, 0.3)',
      dash: ''
    },
    ticks: {
      length: 5,
      visible: true,
      style: 'inner', 
      lineStyle: {
        width: 1,
        color: 'black'
      }
    }
  },
  minorGrid: {
    visible: false,
    count: undefined,  
    lineStyle: {
      width: 1,
      color: 'black',
      dash: ''
    },
    ticks: {
      length: 5,
      visible: false,
      style: 'inner', 
      lineStyle: {
        width: 1,
        color: 'black'
      }
  },
  colorScale: { (deprecated, use the chart level colorScale object)
    colors: ['#253494', '#2C7FB8', '#41B6C4', '#A1DAB4']
  }
},
y2axis: {
  min: undefined,
  max: undefined,
  intervalMode: undefined, 
  intervalValue: undefined, 
  bIsLog: false,
  numberFormat: 'auto',
  invert: false,
  altFrameColor: undefined,  
  colorBands: [],  
  title: {
    text: 'Y2 Axis Title',
    visible: false,
    font: 'bold 9pt Sans-Serif',
    color: 'black' 
    position:'orthogonal'
  },
  labels: {
    visible: true,
    font: '7.5pt Sans-Serif',
    color: 'black'
    excludeMin: false,
    excludeMax: false,
     },
  baseLineStyle: {
    width: 1, 
    color: 'black',
    dash: ''
  },
  bodyLineStyle: {
    width: 1, 
    color: 'transparent',
    dash: ''
  },
  majorGrid: {
    lockToY1: false, 
    visible: true,
    aboveRisers: true,
    lineStyle: {
      width: 1,
      color: 'rgba(255, 255, 255, 0.3)',
      dash: ''
    },
    ticks: {
      length: 5,
      visible: true,
      style: 'inner', 
      lineStyle: {
        width: 1,
        color: 'black'
      }
    }
  },
  minorGrid: {
    visible: false,
    count: undefined,  
    lineStyle: {
      width: 1,
      color: 'black',
      dash: ''
    },
    ticks: {
      length: 5,
      visible: false,
      style: 'inner', 
      lineStyle: {
        width: 1,
        color: 'black'
      }
    }
  }
},
zaxis: {
  mode: undefined, 
  min: undefined,
  max: undefined,
  intervalMode: undefined, 
  intervalValue: undefined, 
  bIsLog: false,
  numberFormat: 'auto',
  swapChartSide: false,
  invert: false,
  altFrameColor: undefined,  
  colorBands: [],  
  title: {
    text: 'Z Axis Title',
    visible: false,
    font: 'bold 9pt Sans-Serif',
    color: 'black'
  },
  labels: {
    visible: true,
    font: '7.5pt Sans-Serif',
    color: 'black',
    excludeMin: false,
    excludeMax: false,
    rotation: undefined 
  },
  baseLineStyle: {
    width: 1, 
    color: 'black',
    dash: ''
  },
  bodyLineStyle: {
    width: 1, 
    color: 'transparent',
    dash: ''
  },
  majorGrid: {
    visible: false,
    aboveRisers: true,
    lineStyle: {
      width: 1,
      color: 'rgba(255, 255, 255, 0.3)',
      dash: ''
    },
    ticks: {
      length: 5,
      visible: true,
      style: 'outer', 
      lineStyle: {
        width: 1,
        color: 'black'
      }
    }
  },
  minorGrid: {
    visible: false,
    count: undefined,  
    lineStyle: {
      width: 1,
      color: 'black',
      dash: ''
    },
    ticks: {
      length: 5,
      visible: false,
      style: 'inner', 
      lineStyle: {
        width: 1,
        color: 'black'
      }
    }
  }
},

Note: The yaxis:colorScale properties have been deprecated and replaced by the colorScale properties described in Defining a Color Scale (colorScale).


WebFOCUS