Highcharts Semi circle donut - doesn't show small item value

[MOhnish]

I am trying to integrate Highchart "Semi circle donut" with the official reference https://www.highcharts.com/demo/pie-semi-circle

This chart doesn't behave well when the value for one parameter is quite high and for the other it is low. As seen in this fiddle.
https://jsfiddle.net/ye9garLc/

Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>January<br>2022',
align: 'center',
verticalAlign: 'middle',
y: 60
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Chrome', 100000],
['Edge', 11.97],
['Firefox', 5.52],
['Safari', 2.98],
['Internet Explorer', 1.90],
{
name: 'Other',
y: 3.77,
dataLabels: {
enabled: false
}
}
]
}]
});

I have given a value of 100000 to chrome and for the rest, it is less than 20. In this case, chrome occupies almost all the space. The rest of the items are not visible much.

I need help if we can set the min-width to the rest of the items to at least show them to the user. In my case, I am not expecting more than 5 items in the chart.

I already tried "minpointlength" which didn't help.

[hubert.k]

Hi MOhnish!
Welcome to our forum and thanks for contacting us with your question!

As you can read in our official documentation here: https://www.highcharts.com/docs/chart-a ... /pie-chart

A pie chart is a circular chart divided into sectors which are proportional to the quantity it represents.

That means, that if you set one point to really high value (in your case 100000) and other points will be small (like 11, 5, 3) pie chart will calculate them by proportion, which means that the high-value point will be really big and other points will be really small. This is a proper way of behaviour of that chart type.

If you to show slices different you have to calculate proportion on your own in JS, for example, like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/ng2z5opy/

Let me know if you have any further questions.
Regards!