Highchart Gauge chart top portion being cropped/hidden

I am using Highcharts (https://www.highcharts.com/) library to create a gauge chart

As you can see in the above image the gauge chart is being cropped at top.

Following is the JS Fiddle i have created with the same:

pane: {
    center: ['50%', '60%'],
    size: '200%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }

If I change the chart.pane.center to ["50%", "80%"] [reason for not doing this : i don't want the chart lower in the page] or reduce the chart.pane.size to "80%" it works fine. [reason for not doing this : i don't want a smaller chart]

I see that svg is being created based on the val but the zindex val of that is very low 0.1 I suspect something is overalapping it.

Solution

The reason for this truncation was that you have an unusual subtitle. It is quite long, so that all chart elements fit on the screen, the solidgauge has been reduced. You forced it to double its size with pane.size, so the logic responsible for drawing the chart interpreted it to go beyond the plot (you can see this if you remove the subtitle). The solution is to set subtitle.floating: true which is recommended in cases like yours where it is in a different place and you don't want space to be generated for it in its original location.

Demo: https://jsfiddle.net/BlackLabel/8vhcg9zL/
API: https://api.highcharts.com/highcharts/subtitle.floating