Inner size of pie chart (HighChart) getting change with the values provided in the series
I am using HichChart to present a doughnut (pie) chart in my angular application. The issue is that the 'inner size' of the graph getting change with the values provided in the series. The chart has only two values in the series. As an example, the chart inner size is getting very thin when I provide the series values as 50 and 50. It looks fine if I provide the values as 20 and 80.
The interesting thing is if I run the same code I have written for 50 and 50 scenario in JsFiddle, chart inner size is not getting thin. (Please note that, in JsFiddle, I have selected the most relevant dev settings - JavaScript + AngularJS 2.0.0-alpha.47).
In My application, 'package.json' file shows the highchart versions as "highcharts": "^6.1.4", "highcharts-angular": "^2.3.0". Please find my angular version and some additional information below. Please assist me to resolve this mystery.
setCompletedTasksDonutChartRM(completedTasks, notCompletedTasks) {
this.donutChartOptionsForRM_Completed = {
chart: {
type: 'pie'
},
credits: {
enabled: false
},
title: {
text: ''
},
plotOptions: {
pie: {
innerSize: 250
}
},
colors: ['#F0F0F0', '#4BB482', '#4cb581'],
series: [{
name: 'Tasks (%)',
data: [
['Not completed', 50],
['Completed', 50],
]
}]
};
}
https://jsfiddle.net/kushannc/4pLkbtzc/5/
The solution is very easy. When you set 50, 50 dataLables are positioned horizontally and take a lot of space, innerSize value is fixed (innerSize = 250 in your example) so the only option to fit the chart in the plot area is to decrease the pie thickness. Check the same settings on a wider screen and you will see it.
The solution is to use innerSize as the percentage of the pie.
Code:
Highcharts.chart('container', {
chart: {
type: 'pie'
},
credits: {
enabled: false
},
title: {
text: ''
},
plotOptions: {
pie: {
innerSize: '70%'
}
},
colors: ['#F0F0F0', '#4BB482', '#4cb581'],
series: [{
name: 'Tasks (%)',
data: [
['Not completed', 50],
['Completed', 50],
]
}]
});