highchartsvisualizationgaugereact-highcharts

Highchart solidgauge is arc clipping but pane is coming correctly

enter image description here

This is mainly happening when startAngle > 90 and endAngle < 270 (this makes arc in bottom) and difference of angle is around 50 (It like quarter arc having start and end angle in bottom). This can be fixed If I reduce Y direction from top value. I want to know why this is happening at first place. Only arc is cropping but Pane is coming correctly.

pane: {
        startAngle: +this.gaugeSetting.minAngle,
        endAngle: +this.gaugeSetting.maxAngle,
        center: [`${this.gaugeSetting.centerX}%`,`${this.gaugeSetting.centerY}%`],
        background: this.gaugeSetting.show ? paneData : [],
        // size: this.gaugeSetting.shapeType === "CUSTOM" ? this.gaugeSetting.customChartSize+"%" : this.gaugeSetting.chartSize,
        size:'100%'
      },
Solution

  • Thanks to https://stackoverflow.com/users/8951377/ppotaczek for answering this

    "It looks like a Highcharts regression bug (working fine with v8: jsfiddle.net/BlackLabel/cf5xroum). Could you report it on the Highcharts GitHub repository: github.com/highcharts/highcharts/issues ? As a workaround, you can disable series animation or call chart.reflow after it. Example: jsfiddle.net/BlackLabel/r3uv97pk "

    I degraded the version of highchart to 8.1.0 then it is working.