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

Option to also enable BorderRadius at the beginning of stack #9288

Closed
gterras opened this issue Jun 19, 2021 · 4 comments · Fixed by #9452
Closed

Option to also enable BorderRadius at the beginning of stack #9288

gterras opened this issue Jun 19, 2021 · 4 comments · Fixed by #9452

Comments

@gterras
Copy link

gterras commented Jun 19, 2021

Feature Proposal

Following this PR : #8941 Only enable the bar borderRadius at the end of the stacks

I really like what this does although I don't really understand why the bottom part would get a radius only when it has negative value.

Feature Use Case

My use case is the following: a single data set (with several values) without negative value, in an horizontal bar. I just need the bar to look pretty with radius on every corner of the dataset (so just like the yellow example of the PR desc but without negative value).

The borderRadius object syntax works well out of the box until the dataset potentially has empty values, then it becomes a nightmare to handle since every declaration of borderRadius has to check against the others in the dataset before setting (or not) the radius.

Possible Implementation

A borderStartStack bool param that would automatically apply radius to the first non null segment of the stack, wherever its value is negative or not.

@LeeLenaleee
Copy link
Collaborator

Duplicate of #9217

@gterras
Copy link
Author

gterras commented Jun 19, 2021

Hi sorry if I wasn't clear enough but it's not, the request is about outer borders so getting exactly like the yellow example of the PR:

image

This behavior is only possible to get out of the box if your dataset contains a starting negative value, else you get :

image

I understand why it's made this way since it is probably what you need in most cases.

I also understand that I can use the borderRadius object syntax to cover this case and easily get the yellow output this way.

However: in the case the dataset can have 0 value this becomes very hard to manage, because any segment can become the first and/or the last of the stack. Which means the borderRadius needs a quite complex logic (testing against every single previous segment for bottom borders + testing against every single next segment for top borders, for every segment) to handle this simple (and common) effect.

So it's just a convenience feature request really, but since it seems to be already somewhat available (by using negative values) I wonder if it's possible to take advantage of it.

@kurkle
Copy link
Member

kurkle commented Jul 21, 2021

I think you just need the borderSkipped: false docs in your dataset.
https://jsfiddle.net/hge96oru/

Edit: Your messages are mixed, in the actual issue you are talking about single dataset and in the next comment about stacks (that require multiple datasets), which is the actual use case?

@gterras
Copy link
Author

gterras commented Jul 21, 2021

Hi yes sorry I meant several datasets but stacked on a single bar, so exactly just like the yellow bar of the linked PR.

FYI here is how I solved it, by checking for all segments if every previous value are 0/null (for left borders) and every next values are 0/null (for right borders):

const borderRadius = 12

const leftBorder = (i, data) =>
	data.slice(0, i).every((v) => v === 0 || !v) ? borderRadius : 0

const rightBorder = (i, data) =>
	data.slice(i + 1).every((v) => v === 0 || !v) ? borderRadius : 0

const chart = {
	data: {
		datasets: my_data.map((value, i, data) => ({
			data: [value],
			borderRadius: {
				topLeft: leftBorder(i, data),
				bottomLeft: leftBorder(i, data),
				topRight: rightBorder(i, data),
				bottomRight: rightBorder(i, data),
			},
		}))
	}
}

This way I get nice rounded borders for bars whatever the stacked values are.

@etimberg etimberg added this to the Version 3.5.0 milestone Jul 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants