Skip to content
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

The size of the SVG does not adapt to the size of the graph #2587

Open
lauradecc opened this issue May 10, 2024 · 2 comments
Open

The size of the SVG does not adapt to the size of the graph #2587

lauradecc opened this issue May 10, 2024 · 2 comments

Comments

@lauradecc
Copy link

Is your feature request related to a problem? Please describe.
I am using the radial bar with endAngle of 90, so it ocuppies a quarter of the circle. Despite that, the SVG maintains the same distribution, so it makes it really hard to position as needed.

Captura de pantalla 2024-05-10 a las 15 32 15

Describe the solution you'd like
I would like the SVG to be the size of the graph, the content itself. As shown in the console under the rect element:
Captura de pantalla 2024-05-10 a las 15 34 01

Describe alternatives you've considered
I have tried the following:

  • To adapt it with the margin property, but the graph gets smaller while SVG maintains the same size.
  • To wrap the component with another svg and modify the viewBox, but it is modified as if zoomed in.
  • To modify width, height and CSS properties of the container.
  • To use position absolute, giving it a bigger size and using overflow hidden, but it complicates the natural responsiveness of the graph.

Does anyone have any ideas I can try? 🙏

Thanks in advance!

@plouc
Copy link
Owner

plouc commented May 16, 2024

This is not supported for the radial bar chart, while 90 degrees is easy to fit, it gets more complicated with less common start/end angles, the pie chart has such feature via the fit property (try changing the start/end angles), you could try to port the feature to the radial bar chart.

@plouc
Copy link
Owner

plouc commented May 16, 2024

There's already a helper available in @nivo/arc, computeArcBoundingBox.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants