-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
Getting lowest and highest possible x and y in a line chart? #4420
Comments
Hello @RonyKordahi, can you please paste a codesandbox example? There are various integration points depending on where exactly you need this information, I believe we can find one if we know what exactly you are after. |
I don't have one myself, the code I'm working on is for a client and I can't share it due to the their data being protected under an NDA, but I took this sample off the web: sample. What I'm trying to figure out is if there's a way to know what the lowest and highest possible value of the X and Y coordinates could be for a dot in the graph. If for example a dot is generated on the X axis at Page A, is there a way to determine the value of it's CX without having to parse through each dot to find the lowest one and store it? EDIT: I should specify I need the maximum X and Y drawing coordinates of the chart, not the values of the dots themselves. |
Can you explain a bit more about what you're trying to do? Where exactly are you trying to place labels and when? When do they shift position? Can you give a screenshot or mockup? There is no current way to do what you ask |
Well for example I have a line who's first dot that has a Y value of 0, which makes it start at the bottom of the graph. The CY coordinate of the dot drawn in the graph is If I resize the graph to fit into the screen of an ipad instead, the CY coordinate is now I'm trying to make it as dynamic as possible because the client will be using this on several screen sizes ranging from ipads to television screens. Having a way to know the lowest and highest possible X and Y drawing coordinates would help tremendously. |
I guess, to frame the question differently, where are you trying to reliably render labels? Only at the beginning and end of your chart data no matter the screen size? I understand that the cx,cy values change as the screen changes, but maybe we can accomplish what you want in a way that is easier than the approach you are taking |
Yes only at the beginning of the line, next to the first dot on each line. |
Try something like this <Line type="monotone" dataKey="pv" stroke="#8884d8" dot>
<LabelList
fill="#111"
position="top"
valueAccessor={(props, index) => {
// { x: 80, y: 188.16, value: 2400, payload: {…} }
console.log(props, index);
return index === 0 ? props.value : undefined;
}}
// offset={20}
/>
</Line> |
I have a custom label component handling the label showing up and the positioning: // Custom label for train names to show up at the beginning of the line
// ↪ Required to be a React component as per the documentation and example
// Documentation: https://recharts.org/en-US/api/Line
// Example: https://recharts.org/en-US/examples/CustomizedLabelLineChart
const CustomizedLabel = (props) => {
const {
// Default props
x,
y,
index,
offset,
// Custom props
name,
color,
maintenance,
} = props;
// console.log(props);
return (
index === 0 && (
<text
// Default properties
x={x}
y={y}
fontSize={15}
stroke={color}
// Label positioning
// ↪ Maintenance will be positioned over the lines for aesthetic reasons
dx={
x === 60
? 10
: maintenance
? 10
: -10
}
dy={
maintenance && x === 60
? -offset * 2
: y === 27
? offset * 2
: maintenance
? -offset * 2
: offset
}
textAnchor={
x === 60
? "start"
: maintenance
? "start"
: "end"
}
>
{name}
</text>
)
);
}
export default CustomizedLabel; The problem is really with the hardcoded X and Y because those are the lowest drawing coordinates based on my screen size. I'm hoping to make those dynamic based on the size of the screen / graph. |
Can I see a screenshot of what your ideal label position is? Even if it's on dummy data. It's hard to picture why you need more than the data that the label component gives you |
From what I can see:
If I have something like:
Then I can always reliably position my (first) label where I want to |
I quickly modified one of the data points just to try and get it going. This dot now has a Y value of 263 which puts it all the way at the top of the graph: I'm hoping to detect drawing Y coordinate (25) dynamically based on the size of the chart so I could modify the label's EDIT: wrong screenshot |
So essentially you want to guarantee that the label is always inside the bounds of the chart? |
Yes, by having the limits of the X and Y coordinates of the graph if possible. |
You could probably hack things to bits and get this to work somehow, but currently it's not possible in a reasonable fashion. @PavelVanecek this is a good use case for exporting hooks at some point. I'll label this as a feature request |
@RonyKordahi If I understand correctly then if you had hooks |
@PavelVanecek By their names it seems like they would return the maximum height and width of the chart which sounds great! I would say having the minimum height and width borders (lowest possible X and Y coordinates) would also be very helpful. |
Lowest possible X and Y coordinates are 0 and 0, are they not? |
Looks like we might be talking about separate things. We have plain chart height and width. And then we have graph area height and width (chart height/width minus margin, minus Legend size, minus axis size, minus anything else that might add to the total chart size). What needs to be known is the X,Y bounds of where a chart item can be drawn. I can get chart height and width today, it just has all the extra stuff added to it |
Yep! It's exactly as @ckifer says. |
Yep we should be able to expose all of that in various hooks in 3.x. And documentation too. |
I hesitate to send this because it will change in 3.0 (see #4437) But here is a sandbox that gets |
Thank you, I'll take a look! |
Little update! I had to put this issue on hold due to client requests but I'm back at it again, and the offset prop in the Customize component is pretty helpful. But I've encountered a very specific issue. I created a state variable to store the offset object inside props so I could use it elsewhere in the code, mainly to help position the custom labels of some of the lines. When I set that state variable to offset (or even just a random array / object) it causes an infinite render loop:
Removing the arrow function or lambda function avoids the issue entirely, and the props are still available inside the rendered component:
Couldn't figure out why but I didn't have a lot of time to dig very deep into the issue. Just thought I'd mention it in case this is something you'd want to keep an eye on! EDIT: Fixed up code blocks formatting error. |
Thanks @RonyKordahi - this all goes away in 3.x with the issue linked above so that is our main goal. I've heard of infinite re-render loops before when doing this kind of stuff as ultimately its ends up being a circular dependency. Render -> offset is calculated -> Customized is rendered -> offset is stored by you -> you calculate some other props based on value and pass to recharts -> repeat from step one This isn't ideal but there's nothing we can do about it until we get rid of customized altogether |
I'm drawing a line chart and adding some custom labels to my lines only on the first dots. I'm trying to display the labels depending on their position in the chart. Is there a way to get the lowest and highest X and Y coordinates for the line chart?
The values change based on screen size and content on the screen and it's making it a little difficult to dynamically adjust them.
The text was updated successfully, but these errors were encountered: