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

Allow VictoryLabel to render multiple text inline #893

Closed
2 tasks done
matt-hernandez opened this issue Jan 9, 2018 · 1 comment
Closed
2 tasks done

Allow VictoryLabel to render multiple text inline #893

matt-hernandez opened this issue Jan 9, 2018 · 1 comment
Assignees
Labels
Note: Good first issue 🤩 Good issue for new contributors Type: Enhancement ✏️ An enhancement or feature proposal that will be addressed after the next release

Comments

@matt-hernandez
Copy link
Contributor

matt-hernandez commented Jan 9, 2018

Checklist

  • I've read through the Docs and Guides to make sure this functionality doesn't already exist

  • I've searched open issues to make sure I'm not opening a duplicate issue

Description

I would like for there to be an option to have VictoryLabel render multiple </tspan> elements inline as opposed to on a new line.

I'm currently making a bar chart based off this design:

(screenshot from Sketch)
screen shot 2018-01-09 at 4 43 50 pm

So I have two chunks of text: "% of Target", "44% for 2017". My first impulse was to use Victory Label. I wrote this jsx:

<VictoryLabel x={15} y={20}
  text={[ '% of target', '44% for 2017' ]}
  style={[{ fill: '#000' }, { fill: '#6128ff' }]}
/>

The rendered output looks like this:

(screenshot from Chrome)
screen shot 2018-01-09 at 4 56 21 pm

Maybe there could be a inline attribute to tell VictoryLabel to render inline instead of multiline.

@boygirl boygirl added Type: Enhancement ✏️ An enhancement or feature proposal that will be addressed after the next release Note: Good first issue 🤩 Good issue for new contributors labels Jan 12, 2018
@parkerziegler parkerziegler reopened this Jan 18, 2018
@boygirl boygirl closed this as completed Jan 22, 2018
@parkerziegler
Copy link
Contributor

FYI @matt-hernandez this PR took care of this issue. You should see the prop added in a future release of Victory.

boygirl added a commit that referenced this issue Jul 17, 2018
Add support for inlining multiple text and passing an array via the lineHeight prop. Features for #893, #902, and #904.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Note: Good first issue 🤩 Good issue for new contributors Type: Enhancement ✏️ An enhancement or feature proposal that will be addressed after the next release
Projects
None yet
Development

No branches or pull requests

3 participants