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

Data labels not working on non zerobased bar charts #3495

Closed
filipfloden opened this issue Oct 27, 2023 · 4 comments
Closed

Data labels not working on non zerobased bar charts #3495

filipfloden opened this issue Oct 27, 2023 · 4 comments
Labels

Comments

@filipfloden
Copy link

filipfloden commented Oct 27, 2023

Description

When using a bar chart, data labels are not working/supported on bars that are non zerobased, i.e., has a start and end value.
image

Steps to check or reproduce

Turn on labels on a bar chart that has non zerobased values. Example code below.


var chart = bb.generate({
  data: {
    columns: [
	["data1", [50, 100], [100, 250], 100, 400, 150, 250],
    ],
    type: "bar", 
    labels: {
	format(value, id, index) {
		return value
	}
     }
  },
  bar: {
    width: {
      ratio: 0.5
    }
  },
  bindto: "#barChart_1"
});

@netil netil added the bug label Oct 28, 2023
@netil
Copy link
Member

netil commented Oct 28, 2023

@filipfloden thanks for the report.
There's one more issue on this, which what is the label text for those ranged values?
ex. [50, 100] --> 100? or 50~100?

image

@filipfloden
Copy link
Author

filipfloden commented Oct 30, 2023

@netil In my specific scenario it would be preferable with [50, 100] --> 100.
But since tooltips display it as [50, 100] --> 50~100 I think it's reasonable to show the label in the same way.
If both are possible with an option that would be great.

Thank you for the response.

@bj00rn
Copy link

bj00rn commented Oct 31, 2023

@netil IMHO ideally the label format function should be called once with [start, end] to allow for custom format logic. I think this reasoning applies to tooltip format function as well. Maybe this is a non-trivial change though

netil pushed a commit to netil/billboard.js that referenced this issue Nov 2, 2023
Handle ranged data from bar/AreaRange type to render data labels text

Ref naver#3495
@netil
Copy link
Member

netil commented Nov 2, 2023

ideally the label format function should be called once

The fix will not call data.labels.format multiple times.
It will pass array value for ranged values as argument.

data: {
  labels: {
    format(value, id, index) {
         // for ranged data, the `value` is array
    }
  }
}

@netil netil closed this as completed in a8ebdef Nov 2, 2023
github-actions bot pushed a commit that referenced this issue Nov 8, 2023
## [3.10.3](3.10.2...3.10.3) (2023-11-08)

### Bug Fixes

* **axis:** Fix x axis autorotate option applies ([e45eaf7](e45eaf7)), closes [#3433](#3433) [#3499](#3499)
* **labels:** Fix data.labels rendering for ranged data ([a8ebdef](a8ebdef)), closes [#3495](#3495)
* **option:** Fix rotated top padding  ([048c4e2](048c4e2)), closes [#3433](#3433)
* **tooltip:** Fix tooltip.format.value arg for bar range data ([c0f445e](c0f445e)), closes [#3507](#3507)
netil pushed a commit to netil/billboard.js that referenced this issue Nov 14, 2023
* **axis:** Fix x axis autorotate option applies ([e45eaf7](naver@e45eaf7)), closes [naver#3433](naver#3433) [naver#3499](naver#3499)
* **labels:** Fix data.labels rendering for ranged data ([a8ebdef](naver@a8ebdef)), closes [naver#3495](naver#3495)
* **option:** Fix rotated top padding  ([048c4e2](naver@048c4e2)), closes [naver#3433](naver#3433)
* **tooltip:** Fix tooltip.format.value arg for bar range data ([c0f445e](naver@c0f445e)), closes [naver#3507](naver#3507)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants