Formatting Minor Grid Lines and Tick Marks

How to:

The minorGrid properties control the visibility and format of minor grid lines and tick marks.


Top of page

x
Syntax: How to Format Minor Grid Lines and Tick Marks
axisname: {
minorGrid: {
  visible: boolean,
  count: number,
  lineStyle: {
    width: number,
    color: 'string',
    dash: 'string'
   },
    ticks: {
      length: number,
      visible: boolean,
      style: 'string', 
      lineStyle: {
        width: number,
        color: 'string'}
    }
  }
}

where;

axisname

Can be:

  • xaxis
  • yaxis
  • y2axis
  • zaxis
minorGrid:

Defines the properties of the minor grid lines.

visible: boolean

Controls the visibility of the minor grid lines. Valid values are:

  • true, which draws the minor grid lines.
  • false, which does not draw the minor grid lines. This is the default value.
count: number

Is the number of minor grid lines to draw between each major grid line. The default value is undefined.

lineStyle:

Defines the line style of the minor grid lines.

width: number

Is a number that defines the width of minor grid lines in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of minor grid lines using a color name or numeric specification string. The default value is 'black'.

For information about defining colors, see Colors and Gradients.

dash: 'string'

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 followed by the width of the gap between dashes (for example, dash: '1 1' draws a dotted line).

ticks:

Defines the properties of the minor grid line tick marks

length: number

Is a number that defines the length of tick marks in pixels. The default value is 5.

visible: boolean

Controls the visibility of tick marks. Valid values are

  • true, which draws the tick marks.
  • false, which does not draw the tick marks. This is the default value.
style: 'string'

Is a string that defines the tick mark style. Valid values are:

  • 'inner', which places the tick marks inside the minor grid lines. This is the default value.
  • 'outer', which places the tick marks outside of the minor grid lines. This is the default value.
  • 'span', which places half of each tick mark outside the minor grid line, and half of the tick mark inside the minor grid line.
lineStyle:

Defines the line style of the minor grid line tick marks.

width: number

Is a number that defines the width of the tick marks in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of tick marks using a color name or numeric specification string. The default value is 'black'.



Example: Formatting Minor Grid Lines and Tick Marks

The following request generates y-axis minor grid lines that are solid tan lines and minor grid lines that are dashed pink lines:

GRAPH FILE WFLITE
SUM COGS_US 
BY MODEL
WHERE PRODUCT_CATEGORY EQ 'Computers'
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET STYLE *
*GRAPH_JS
blaProperties: {lineConnection: 'curved'},
yaxis: { 
  majorGrid: {visible: true, lineStyle: {width: 2, color: 'tan'}},
  minorGrid: {visible: true, lineStyle: {width: 2, color: 'pink', 
  dash: '2 2'}}      
}
*END
ENDSTYLE
END

The output is:

By default, two minor grid lines are being drawn between each major grid line. To change that number to one minor grid line between major grid lines, change the y-axis properties to the following:

yaxis: { 
  majorGrid: {visible: true, lineStyle: {width: 2, color: 'tan'}},
  minorGrid: {visible: true, count:1, lineStyle: {width: 2, color: 'pink', dash: '2 2'}},
}

The output is:


Information Builders