Is it possible to display bars based on two values in Recharts Js? #2931
Unanswered
TooMuchLagWillKillYou
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I have to represent the below array in a chart using Recharts Js library. I want the Y axis to represent the cost property and the X axis to represent the volume property and the chart must be a bar chart (requested by the client).
Basically, the bar must grow in height based on their cost but they also have to grow in height based on their volume and that's what I'm struggling with: I can't find a way to display the bars based on their volume too. In this picture it's possible to see the desired result, it was sent me by the client but be aware that the visual representation might not be exact and consistent with the data.
What I've tried:
I tried to draw the bars "manually" using the shape prop in the Bar component and setting a width based on the volume value but it's just a weak workaround because the scale of the X axis won't be consistent with the bars. I also tried to set the width with the barSize prop but this only affects the height in case of a horizontal chart
Example of data array:
Question: How can I set the bars width in order to display the volume value?
Beta Was this translation helpful? Give feedback.
All reactions