Home > Docs > grid

grid

Configuration Structure

grid: {
  show: boolean,
  borderColor: string,
  strokeDashArray: ApexDashPattern,
  position: 'front' | 'back',
  xaxis: { ... },
    lines: { ... },
      show: boolean,
      offsetX: number,
      offsetY: number,
  yaxis: { ... },
    lines: { ... },
      show: boolean,
      offsetX: number,
      offsetY: number,
  row: { ... },
    colors: string[],
    opacity: number,
  column: { ... },
    colors: string[],
    opacity: number,
  padding: { ... },
    top: number,
    right: number,
    bottom: number,
    left: number,
}

show

Default: true

To show or hide grid area (including xaxis / yaxis)

borderColor

Default: '#e0e0e0'

Colors of grid borders / lines

strokeDashArray

Default: 0

Dashes the grid lines. A higher number creates longer dashes and gaps. Since 8.5.0 it also takes a full dash pattern, a string such as '8 3 2 3' or an array of lengths. See stroke.dashArray.

position

Default: 'back'

Whether to place grid behind chart paths of in front. Available options for position

  • front
  • back

xaxis

lines

grid.xaxis.lines

show

grid.xaxis.lines.show
Default: false

Whether to show / hide x-axis lines

yaxis

lines

grid.yaxis.lines

show

grid.yaxis.lines.show
Default: true

Whether to show / hide y-axis lines

row

colors

grid.row.colors
Default: undefined

Grid background colors filling in row pattern. Each row will be filled with colors based on the index in this array. If less colors are specified, colors are repeated.

opacity

grid.row.opacity
Default: 0.5

Opacity of the row background colors.
Accepts values from 0 to 1

column

colors

grid.column.colors
Default: undefined

Grid background colors filling in column pattern. Each column will be filled with colors based on the index in this array. If less colors are specified, colors are repeated.

opacity

grid.column.opacity
Default: 0.5

Opacity of the column background colors. Accepts values from 0 to 1

padding

Extra space around the plot, in pixels, added to what the chart reserves itself. Negative values take reserved space back.

Above the plot, an axis chart keeps a 20px band even with no title or subtitle: 10px, plus 5px for each of the two that is unset (a set one adds its margin instead, 5px by default). On column, line and area charts that band holds the top y-axis label's overhang and any marker or data label above the top value, so top: -12 is about as far as is safe there. On a horizontal bar chart with no title the band is empty, and top: -20 removes it. Trellis panels drop the band on their own.

top

grid.padding.top
Default: 0

Grid padding from top

right

grid.padding.right
Default: 10

Grid padding from right

bottom

grid.padding.bottom
Default: 0

Grid padding from bottom

left

grid.padding.left
Default: 12

Grid padding from left

offsetX

grid.xaxis.lines.offsetX

Sets the left offset of the vertical grid lines.

offsetY

grid.xaxis.lines.offsetY

Sets the top offset of the vertical grid lines.

offsetX

grid.yaxis.lines.offsetX

Sets the left offset of the horizontal grid lines.

offsetY

grid.yaxis.lines.offsetY

Sets the top offset of the horizontal grid lines.