Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove margin completely when no axis, title or legend is present #2367

Closed
dmke opened this issue Oct 15, 2021 · 3 comments
Closed

Remove margin completely when no axis, title or legend is present #2367

dmke opened this issue Oct 15, 2021 · 3 comments
Assignees

Comments

@dmke
Copy link

dmke commented Oct 15, 2021

Description

I'd like to recreate something like Grafana's "single stat" element, this is how far I've got:

image

As you can see, the graph does not end flush with the container, and I can't persuade billboard.js to remove the margin.

Steps to check or reproduce

https://codepen.io/dmke/pen/XWaXJrq

@netil netil added the question label Oct 18, 2021
@netil
Copy link
Member

netil commented Oct 18, 2021

Hi @dmke, giving negative values for padding will remove the gaps.

  padding: {
    left: -5,
    right: -5,
    top: -7,
    bottom: -7
},

@dmke
Copy link
Author

dmke commented Oct 18, 2021

I see, thank you.

Where do those numbers come from? Are they independent of the size of the graph, or will I need to adjust them if the graph has, say, double/triple the width?

When setting the min value for the Y axis (e.g. { y: { min: 0, show: false } }; I've updated the pen), I still get a gap on the bottom:

image

Do I just fiddle with the bottom padding, or is there a more robust solution?

@netil
Copy link
Member

netil commented Nov 3, 2021

Adjusting padding.bottom, giving more negative value will remove the gap.
Padding option values defaults to 0, but it doesn't mean as "no margin".

To facilitate this, I'll consider adding some new option like padding=false for next release.

@netil netil added the feature label Nov 3, 2021
@netil netil self-assigned this Dec 16, 2021
netil added a commit to netil/billboard.js that referenced this issue Dec 17, 2021
When set to 'false', will remove padding area completely.

Ref naver#2367
@netil netil closed this as completed in 2052a19 Dec 17, 2021
github-actions bot pushed a commit that referenced this issue Dec 17, 2021
# [3.3.0-next.1](3.2.2...3.3.0-next.1) (2021-12-17)

### Bug Fixes

* **text:** Fix text position with candlestick type combination ([f84ab3e](f84ab3e)), closes [#2436](#2436)
* **tooltip:** fix candlestick tooltip display with xs option ([0278067](0278067)), closes [#2434](#2434)

### Features

* **bar:** add non zero based bar chart ([3588abe](3588abe)), closes [#2408](#2408) [#2438](#2438)
* **bar:** Implement stacking bar radius ([8f14d1a](8f14d1a)), closes [#2428](#2428)
* **module:** Support dual CJS/ESM package ([437c007](437c007)), closes [#2202](#2202)
* **option:** Enhance padding to be removed completely ([2052a19](2052a19)), closes [#2367](#2367)
* **plugin:** Intent to ship TableView plugin ([215b611](215b611)), closes [#1873](#1873)
github-actions bot pushed a commit that referenced this issue Jan 14, 2022
# [3.3.0](3.2.2...3.3.0) (2022-01-14)

### Bug Fixes

* **api:** Ensure svg nodes to be removed from memory  ([f49ed83](f49ed83)), closes [#2489](#2489)
* **event:** fix touch event handling on arc ([d3d2e05](d3d2e05)), closes [#2477](#2477)
* **text:** Fix text position with candlestick type combination ([f84ab3e](f84ab3e)), closes [#2436](#2436)
* **tooltip:** fix candlestick tooltip display with xs option ([0278067](0278067)), closes [#2434](#2434)
* **types:** Fix axis types definition ([92fb033](92fb033)), closes [#2499](#2499)
* **types:** Fix plugin's type definition ([f3690f9](f3690f9)), closes [#2483](#2483)

### Features

* **axis:** alow user to hide tick lines while using culling ([aad8c45](aad8c45)), closes [#2478](#2478) [#2480](#2480)
* **bar:** add non zero based bar chart ([3588abe](3588abe)), closes [#2408](#2408) [#2438](#2438)
* **bar:** Implement stacking bar radius ([8f14d1a](8f14d1a)), closes [#2428](#2428)
* **bar:** Intent to ship bar.indices.removeNull ([b16605d](b16605d)), closes [#1687](#1687)
* **option:** Enhance padding to be removed completely ([2052a19](2052a19)), closes [#2367](#2367)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants