I am currently utilizing HighCharts to display a doughnut (pie) chart in my Angular application. One issue I am facing is that the 'inner size' of the graph changes based on the values provided in the series. When the series has only two values, such as 50 and 50, the inner size appears very thin. However, when I provide values like 20 and 80, the chart looks fine.
An interesting observation is that when I run the same code for the scenario with values 50 and 50 on JsFiddle, the inner size of the chart does not appear thin. It should be noted that in JsFiddle, I have selected relevant dev settings - JavaScript + AngularJS 2.0.0-alpha.47).
In my application, the 'package.json' file indicates the Highchart versions as "highcharts": "^6.1.4", "highcharts-angular": "^2.3.0". Below, you can find my Angular version and some additional information. Kindly help me unravel 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/
https://i.sstatic.net/V65pE.png