-
Notifications
You must be signed in to change notification settings - Fork 351
Understanding padding
Jae Sung Park edited this page Sep 22, 2023
·
21 revisions
- 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
)
- axis displays (
- 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.
- If want remove axes letting only chart shape visible, use
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
.
If just wants remove all other elements, rather than adjusting with padding values, use padding=false
instead.
padding: false
- 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"
}
- 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.
- The below example shows, all padding directions are given
padding: {
mode: "fit",
top: 20,
bottom: 20,
left: 20,
right: 20
}
- Why we decided to start billboard.js?
- Comparison table
- How to migrate from C3.js?
- Who's using billboard.js
- Third party applications
- Themes
- Roadmap
- Architecture & Event
- Plugin Interface
- Release workflow
- How behaves for dynamic loading?
- How tooltip behaves on grouped option?
- How to load as ESM directly from the browser?
- How to implement realtime chart?
- How to bundle for legacy browsers?
- How to generate chart image in Node.js environment?
- Understanding padding