-
-
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
Axis scale="band" no longer works as of Recharts 2.x.x #2742
Comments
I think it changed internally from the d3-scale library of how it works. You could give it a try to this and see if has effect: import { scaleBand } from "d3-scale";
const scale = scaleBand().domain(["a"]).range([0,100]);
...
<XAxis dataKey="name" scale={scale} padding={{ left: 10, right: 10 }} /> |
@semoal thanks, but I just tried in CodeSandbox, didn't seem to have any effect. |
Cool, looks like a regression we'll look into it as soon as possible. I want before the end of this year to decide a roadmap and start giving some fresh air to the library. |
@semoal just wondering what the expectation is here for a fix? It is kind of blocking us, as we can't upgrade React beyond 16.4 (we hit a very obscure crash with Recharts 1.x) until we upgrade Recharts to 2.x. Would be happy to pay for someone to work on this, as I appreciate there are many demands on time... |
This is also affecting our implementation. I tried to hunt through the source for a potential PR but wasn't familiar enough with the methods used to contribute on this one. Seems like whatever happened during conversion of |
Hello, are there any updates/workaround? I am also annoyed by this bug for displaying histograms in my react application. |
Any update on this? |
@chenasraf @semoal Yes, I employed someone to fix this, and just heard this morning that the fix is done. A PR should be coming v.soon. Watch this space! |
Note to anyone using patch-package to apply this fix in the meantime. You need to apply it to the es6/utils/ChartUtils.js copy under node_modules, and the one under src/ To avoid a bug in "npm ci" you also need to add the "name" property to your package.json. |
@semoal and anyone else affected. With the PR #2794 there is still a small remaining issue, with a 2 pixel horizontal offset. This can be worked around by replacing the final '0' with a '2':
But not being familiar with the code we are reluctant to post this as a fix without understanding why. |
Though I see a fix and that it's actually has some effect. It still has issues with 'bands' scale type. https://codesandbox.io/s/histogram-recharts-2-1-15-forked-e0g1sb?file=/src/App.tsx bands-issue.mp4 |
@uazure I'm observing the exact same issue. Does anyone have clue how it would be possible to overcome this problem with Tooltip being offset from the bars themselves? 👆 |
I have a workaround I just found, with v2.5.0 that seems to work for my case, based on the storybook example with multiple X axes -- I create my data as a list of records
and then I can render the bar graph with two x-axes:
The axis based on Hope this helps someone else! |
Reproduction link
Steps to reproduce
Run the code sandbox, which is closely based on the recharts bars example. It also fails on 2.0.x.
What is expected?
I expect that the X axis ticks are placed "around" the bars in the same way that scale="band" used to do in Recharts 1.8.5.
See this 1.8.5 example: https://codesandbox.io/s/histogram-recharts-1-8-5-wvvqu
What is actually happening?
scale="band" has no effect. You can delete it from the without the graph changing at all.
I use scale="band" to display histograms, where the axis ticks need to be at the points between the bars, because they are showing the start and end of the histogram bin.
There is still an issue with the last tick, but I work around this by adding a second axis with just that tick.
The text was updated successfully, but these errors were encountered: