Understanding padding

⚠️ The below criteria accurately applied starting from v3.10.0

Default padding

• Axis based chart will have default padding values(which vary based on options) as follows.
• Options which can make influential are:
  • axis displays (axis.[x|y|y2].show)
  • axis position (axis.[y|y2].inner)

Specifying padding values

• Padding value will start from the chart shape's area.
• Specifying all direction's value as 0(zero), will make axes to be hidden.
  • If want remove axes letting only chart shape visible, use padding=false instead.

padding: {
  top: 0,
  bottom: 0,
  left: 0,
  right: 0 
}

⚠️ NOTE: legend element is "excluded" from the padding calculation.

• On padding dimension, legend element isn't included.
• Hence, when legend element is visible, specifying padding.bottom=0 will not behave hiding bottom area.
  • If want legend element to be hidden, set legend.show=false.

padding=false

If just wants remove all other elements, rather than adjusting with padding values, use padding=false instead.

padding: false

💡 online example

'Fit' padding

• When padding.mode='fit' is set, will remove padding values as possible.
  • Padding will vary based on variety of different option combination.
  • "possible" means, will remove padding, but letting visible elements to not hide and occupying container element.

padding: {
  mode: "fit"
}

💡 online example

Specifying padding values

• Padding value will start from the 'fit' mode state.
• Specifying all direction's value as 0(zero), will stay same as the 'fit' mode state.
• It means, all padding values will be increased starting from the 'fit' mode state.
  • The below example shows, all padding directions are given 20px, and paddings are set starting from visible element's position.

padding: {
  mode: "fit",
  top: 20,
  bottom: 20,
  left: 20,
  right: 20 
}