CustomTick
component in YAxis
not using all available space and not showing icon
#3563
Unanswered
201flaviosilva
asked this question in
Q&A
Replies: 1 comment 1 reply
-
Since you are using a margin to give that space to the left of the graphic, you can use a fixed width for the text ( function CustomTick(props) {
const {
payload: { value }
} = props;
const isWithIcon = NAME_WITH_ICON.includes(value);
return(
<Text {...props} width={160} fill={isWithIcon ? "green" : "red"}>
{isWithIcon && <GoGlobe />}
{value}
</Text>
);
} About the icon, I don't know how to help you. But it's weird because recharts uses SVG, and react-icons are SVGs too, so in theory it should work. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hey there 👋,
I have implemented a
CustomTick
component for theYAxis
, which should display a text label and an icon if the label matches a certain value. However, theCustomTick
component is not using all the available space for the text label and the icon is not showing, but instead of the icon showing, it is rendering[object, object]
.Current output example:
My
CustomTick
comp:What could be causing the
CustomTick
component to not use all the available space for the text and not show the icon?Here is a code example: https://codesandbox.io/s/recharts-custom-tick-with-a-icon-upiev7
Any help would be appreciated. Thank you!
Beta Was this translation helpful? Give feedback.
All reactions