Comments (22)
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
from recharts.
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
from recharts.
Yep! It's exactly as @ckifer says.
from recharts.
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.
from recharts.
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.
from recharts.
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
from recharts.
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 743
, which seems to be the highest value of a Y coordinate for drawing in the graph.
If I resize the graph to fit into the screen of an ipad instead, the CY coordinate is now 855
due to the screen size changing. I'm hoping to adjust the position of the dot's label based on this CY if it is the maximum value in the graph.
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.
from recharts.
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
from recharts.
Yes only at the beginning of the line, next to the first dot on each line.
from recharts.
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>
from recharts.
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.
from recharts.
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 recharts.
From what I can see:
- You always get
x
andy
values from the props that come through to your custom component - When the screen re-sizes
x
andy
change with it - Your offsets (cx, cy) can be the same no matter what screen size you are at and you get the same result (or if desired, store the current height and width of the chart from responsive container and make slight cx,cy adjustments based on that like you would with breakpoints)
If I have something like:
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
// potentially dynamic based on current chart size
dx={10}
dy={-10}
textAnchor={x === 60 ? "start" : maintenance ? "start" : "end"}
>
{name}
</text>
)
);
Then I can always reliably position my (first) label where I want to
from recharts.
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 dy
property and make it show up lower than it's default position (I've disabled the dy
property from the code above just for this screenshot). And I'd like to do the same for dots that have a Y value of 0 and are generated on the bottom of the graph. Likewise for the X drawing coordinates.
EDIT: wrong screenshot
from recharts.
So essentially you want to guarantee that the label is always inside the bounds of the chart?
from recharts.
Yes, by having the limits of the X and Y coordinates of the graph if possible.
from recharts.
@RonyKordahi If I understand correctly then if you had hooks useChartWidth()
and useChartHeight()
would that give you the information you need? These are not present in 2.x but we will ship them in 3.x
from recharts.
@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.
from recharts.
Lowest possible X and Y coordinates are 0 and 0, are they not?
from recharts.
Yep we should be able to expose all of that in various hooks in 3.x. And documentation too.
from recharts.
I hesitate to send this because it will change in 3.0 (see #4437)
But here is a sandbox that gets offset
in the Customized
component and calculates the charts edges with it.
from recharts.
Related Issues (20)
- Apply `className` to the `RadarChart` component. HOT 2
- Server-side rendering not working with Next.js HOT 7
- The first hover over a Scatter chart point displays the custom tooltip in an incorrect position HOT 4
- Accessibility issue with Brush component HOT 5
- Support for defaultProps will be removed from function components in a future major release. HOT 1
- Cannot customize recharts-active-dot HOT 1
- Uncaught TypeError: import_events.default is not a constructor HOT 3
- Apply `className` to the `label` and `labelLine` in `PieChart` component. HOT 1
- Layer: TypeScript error with latest `@types/react` version HOT 19
- accessibility issue with using 2 charts on the same page. HOT 7
- Pie charts that are 100% a single value have a line that shouldn't be there HOT 5
- how can I pin a tooltip in a chart HOT 8
- Automatically format large axis label values HOT 6
- Tooltip deprecation HOT 1
- Negative interval number HOT 5
- Tooltip first render HOT 7
- YAxis is missing if value = null || undefined HOT 2
- different name on tooltip from xaxis on barchart HOT 4
- Better API documentation HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from recharts.