search

krispo / ng2-nvd3

Angular2 component for nvd3
http://krispo.github.io/ng2-nvd3/
MIT License
328 stars 104 forks source link

DonutChart empty space #118

Closed Smcculloch closed 7 years ago

Smcculloch commented 7 years ago

First of all, great job on this component for angular. Its flexibility offers everything I need for a charting component!

The demo of the DonutChart on the original Angular-nvD3 implementation is exactly what I am looking for and it works the same in ng2-nvD3. But because we are forcing a half circle in this case (like a gauge chart) the original height is only half used leaving a large white-space beneath the chart.

Its there any way to get around this? I have used D3 to adjust the height of the SVG element but then you have a chart that can be seen resizing in height (provided anything is place under the chart).

Thanks for your help! Stephen

Moulde commented 7 years ago

Could you wrap the chart in a div, and set the height in CSS? Like so: http://plnkr.co/edit/xH2FwFTj0YsnUz2aLiGx?p=preview

But you'd probably need to set the style from js, to calculate the right height, and then you may experience the issue you describe, where the user will see the original height before it being resized.

Smcculloch commented 7 years ago

Thanks for your response. This does indeed get around the visual change in size of the chart. I've made note of this in our system should a better solution come in the future to this issue.

Kind regards, Stephen

Op di 24 okt. 2017 om 13:53 schreef Malte Baden Hansen < notifications@github.com>:

Could you wrap the chart in a div, and set the height in CSS? Like so: http://plnkr.co/edit/xH2FwFTj0YsnUz2aLiGx?p=preview

But you'd probably need to set the style from js, to calculate the right height, and then you may experience the issue you describe, where the user will see the original height before it being resized.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/krispo/ng2-nvd3/issues/118#issuecomment-338965178, or mute the thread https://github.com/notifications/unsubscribe-auth/ABeBKdczjPzXRBrV6xbztBhIS7Cgxr6wks5svc-xgaJpZM4P2uXl .