Understanding padding

⚠️ The below criteria accurately applied starting from v3.10.0
There're remained inconsistency and will try to make adjustments in the future release.

Inconsistency of padding on previous versions (click to expand)

Why stayed as is?

• The inconsistency of padding application stayed from the legacy(from the start of the fork).
• Adjusting it is extremely risky and hard, because it will affect entire chart rendering position. Also can break backward compatibility.

General condition

padding: {
   top: 0, bottom: 0, left: 0, right: 0
},
axis: {
   x: {show: true},
   y: {show: true},
   y2: {show: true},
}

v1.12

a) with legend

	Non rotated axis	Rotated Axis
Demo	https://jsfiddle.net/netil/0kbq419d/14/	https://jsfiddle.net/netil/0kbq419d/22/
Screenshot
Observation	- y axis vertical line remain shown - y2 axis vertical line remain shown - x axis remain shown completely with the legend	- y axis vertical line remain shown - y2 axis vertical line remain shown - x axis remain shown completely with the legend

b) without legend (legend.show=false)

	Non rotated axis	Rotated Axis
Demo	https://jsfiddle.net/netil/0kbq419d/36/	https://jsfiddle.net/netil/0kbq419d/37/
Screenshot
Observation	- padding.bottom=0, but x axis remain shown - removed dimension where legend occupied	render same as with legend case, but legend is hidden

v2.1.4

a) with legend

	Non rotated axis	Rotated Axis
Demo	https://jsfiddle.net/netil/0kbq419d/20/	https://jsfiddle.net/netil/0kbq419d/24/
Screenshot
Observation	- y axis is hidden completely - y2 axis vertical line remain shown - x axis remain shown completely with the legend	- y/y2 axes are fully shown - x axis is hidden

b) without legend (legend.show=false)

	Non rotated axis	Rotated Axis
Demo	https://jsfiddle.net/netil/0kbq419d/39/	https://jsfiddle.net/netil/0kbq419d/41
Screenshot
Observation	- padding.bottom=0, but x axis remain shown - removed dimension where legend occupied	render same as with legend case, but legend is hidden

v3.5

a) with legend

	Non rotated axis	Rotated Axis
Demo	https://jsfiddle.net/netil/0kbq419d/18/	https://jsfiddle.net/netil/0kbq419d/26/
Screenshot
Observation	- y axis is hidden completely - y2 axis vertical line remain shown - x axis remain shown completely with the legend	- y/y2 axes are fully shown - x axis is hidden

b) without legend (legend.show=false)

	Non rotated axis	Rotated Axis
Demo	https://jsfiddle.net/netil/0kbq419d/43/	https://jsfiddle.net/netil/0kbq419d/44/
Screenshot
Observation	- padding.bottom=0, but x axis remain shown - removed dimension where legend occupied	render same as with legend case, but legend is hidden

General Direction

• when padding set to 0, it should starting from shape area
  • in this case, in the condition where axes are shown, they should be hidden
• in the previous version, legend visibility remained visible even padding set to 0, because of legend height.
  • to keep this behavior, legend will be excluded from the padding calculation.
  • if need control legend visibility, it can be easily manipulated by option: legend.show=false.

---

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, relatively.
• Specifying all direction's value as 0(zero), will stay same as the 'fit' mode initial state.
• All padding values will be increased starting from the 'fit' mode initial 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 
}