•  


Custom label content cannot be seen unless it's a Text component · Issue #3795 · recharts/recharts · GitHub
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

Custom label content cannot be seen unless it's a Text component #3795

Open
1 task done
bhatt40 opened this issue Sep 26, 2023 · 7 comments
Open
1 task done

Custom label content cannot be seen unless it's a Text component #3795

bhatt40 opened this issue Sep 26, 2023 · 7 comments
Labels
docs needed Issues that require documentation

Comments

@bhatt40
Copy link

bhatt40 commented Sep 26, 2023

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Use the content property to render custom content in a Label component. Return an element other than a Text component.
In the provided example, the custom x-axis Label is rendering a Text component. The y-axis Label is rendering a <div> containing a Text component. The x-axis content can be seen as expected but the the y-axis content is being rendered but cannot be seen anywhere.

What is expected?

The element should be rendered and displayed where the label content should be.

What is actually happening?

The elements are rendered in the DOM but cannot be seen anywhere. Hovering over them in the Elements tab of DevTools does not show them displayed anywhere on the page.

Environment Info
Recharts v2.8.0
React 16.8.6
System MacOS Ventura 13.5.2
Browser Google Chrome 116.0.5845.187
@nikolasrieble nikolasrieble added the bug General bug label label Sep 26, 2023
@nikolasrieble
Copy link
Contributor

It seems that the label is rendered, but with width and height of zero. That certainly seems like a bug. ??

@ckifer
Copy link
Member

Generally the things within an SVg need to be svgs because they need absolute positioning. You could put something other than an SVg within a foreign Object tag but it still needs absolute positioning

@bhatt40
Copy link
Author

Thanks, @ckifer . I've tried that here but it still isn't being displayed.

@ckifer
Copy link
Member

ckifer commented Sep 27, 2023

The tag is < foreignObject >

Sorry I'm on mobile so I can't modify the sandbox

@bhatt40
Copy link
Author

@ckifer That worked, thanks. It might be useful to add this info to the documentation.

@ckifer
Copy link
Member

Feel free to open a PR! But agreed this can be explained in the docs somewhere

@nikolasrieble nikolasrieble added docs needed Issues that require documentation and removed bug General bug label labels Sep 27, 2023
@nikolasrieble
Copy link
Contributor

I believe it makes sense to add an example to storybook, or a comment to the type of content. Both would help for other users to discover how this works. I added the docs needed tag thus.

Sign up for free to join this conversation on GitHub . Already have an account? Sign in to comment
Labels
docs needed Issues that require documentation
Projects
None yet
Development

No branches or pull requests

3 participants
- "漢字路" 한글한자자동변환 서비스는 교육부 고전문헌국역지원사업의 지원으로 구축되었습니다.
- "漢字路" 한글한자자동변환 서비스는 전통문화연구회 "울산대학교한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.
- 현재 고유명사(인명, 지명등)을 비롯한 여러 변환오류가 있으며 이를 해결하고자 많은 연구 개발을 진행하고자 하고 있습니다. 이를 인지하시고 다른 곳에서 인용시 한자 변환 결과를 한번 더 검토하시고 사용해 주시기 바랍니다.
- 변환오류 및 건의,문의사항은 juntong@juntong.or.kr로 메일로 보내주시면 감사하겠습니다. .
Copyright ⓒ 2020 By '전통문화연구회(傳統文化硏究會)' All Rights reserved.
 한국   대만   중국   일본