nivo
nivo copied to clipboard
Area overflows when enableArea set to true and yScale auto
Describe/explain the bug I'm trying to add an area to a line chart with 1 line. I've added an yScale with automatic min and max values. But it seems like the area is overflowing the axes when I do this. It doesn't happen when I don't set the min and max properties to auto
To Reproduce In this Codesandbox you will find an example of the issue: https://codesandbox.io/s/nivo-enable-area-5s934t?file=/src/App.js
Expected behavior The Area shouldn't overflow. It's like the Area is too big.
Screenshots
Desktop:
- OS: Mac
- Browser: Chrome
- @nivo/line: 0.80.0
- @nivo/core: 0.80.0
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!
bump
@plouc this is still an issue, could you reopen this?
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
This is still an issue. It seems the overlapping area can happen with other non-zero yScale.min values. It is not just a problem with 'auto'
It seems you would need to define a minimum value to your y-axis. It defaults to "auto"
In your yScale
prop values, set your min
value to 0
so that the gradient area will start from that 0 baseline as well.