The FusionCharts Doughnut chart is designed to adjust its inner and outer doughnut radius, as well as other components like legends, labels, and values, to fit within the specified dimensions of the chart height and width.
As a result, the doughnut radius will dynamically change based on the dimensions provided for the chart, ensuring optimal use of available space.
When specifying chart dimensions in percentage, it is important to set the height/width of the container div either in pixels or dynamically, possibly using Bootstrap, to ensure proper rendering.
In cases where the div dimension is dynamically set using Bootstrap and the chart dimension in percentage, the doughnut radius will adapt accordingly to changes in the chart dimension.
For more details, you can view a sample fiddle: https://jsfiddle.net/kv8npm1w/
FusionCharts.ready(function() {
// Chart initialization code goes here
});
The chart also provides an option to explicitly set the inner and outer radius using "doughnutRadius" and "pieRadius" properties in the chart dataSource.
However, it's important to note that setting the radius explicitly may lead to overlapping or the doughnut exceeding the chart dimension limits, as it won't dynamically adjust its radius once set explicitly.
You can view a sample fiddle showcasing a chart with radius set explicitly here: https://jsfiddle.net/kv8npm1w/2/
FusionCharts.ready(function() {
// Chart initialization code with explicitly set radius goes here
});