Skip to content

Understanding padding

Jae Sung Park edited this page Aug 16, 2024 · 21 revisions

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 image image
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 image image
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 image image
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 image image
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 image image
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 image image
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 image image
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 image image
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)
image

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

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.
image

padding=false

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

padding: false
image

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

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