☰

grid

Configuration Structure

grid: {
  show: boolean,
  borderColor: string,
  strokeDashArray: number,
  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

Creates dashes in borders of svg path. Higher number creates more space between dashes in the border.

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

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