Understanding padding

Warning

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, was 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 the space 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 the space 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 the space 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.

v3.10.3

a) with legend

	Non rotated axis	Rotated Axis
Demo	https://jsfiddle.net/netil/0kbq419d/50/	https://jsfiddle.net/netil/0kbq419d/52/
Screenshot
Observation	- y/2 axes are hidden completely - part of x axis remain shown with the legend, due to the legend's height	- x/y2 axes are hidden completely - part of y axis remain shown with the legend, due to the legend's height

b) without legend (legend.show=false)

	Non rotated axis	Rotated Axis
Demo	https://jsfiddle.net/netil/0kbq419d/48/	https://jsfiddle.net/netil/0kbq419d/49/
Screenshot
Observation	all axes are hidden completely	all axes are hidden completely

---

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

Tip

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"
}

Tip

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 
}