When adding a legend to the donut utilization chart, the height and/or width (the overall size of the SVG) is typically made larger than the donutHeight and/or donutWidth (the size of the donut) in order to accommodate the legend within the same SVG.
The quirk is when a user wants to change the chart's default size. It's not intuitive that donutHeight and/or donutWidth must be adjusted.
As an example, consider the height and width are set at 150px, but the donutHeight and donutWidth properties remain at the default 230px. In this scenario, the donut can overflow the SVG as shown below.
In this scenario, the user is expected to set the donutHeight and donutWidth properties to adjust the chart's size. However, it would be more helpful if we could provide defaults based on the height and width -- the overall size of the SVG.
Reactions are currently unavailable
When adding a legend to the donut utilization chart, the height and/or width (the overall size of the SVG) is typically made larger than the donutHeight and/or donutWidth (the size of the donut) in order to accommodate the legend within the same SVG.
The quirk is when a user wants to change the chart's default size. It's not intuitive that donutHeight and/or donutWidth must be adjusted.
As an example, consider the height and width are set at 150px, but the donutHeight and donutWidth properties remain at the default 230px. In this scenario, the donut can overflow the SVG as shown below.
In this scenario, the user is expected to set the donutHeight and donutWidth properties to adjust the chart's size. However, it would be more helpful if we could provide defaults based on the height and width -- the overall size of the SVG.