Highchart Activity Gauge Always Display Text In The Center

I want to use Highchart's activity gauge as some kind of circle animation surrounding a number/ figure in text form. The default behaviour is the text in the center of the chart wi

Solution 1:

You have the error in the console. You should fix the code responsible for rendering arrows.

this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
        .attr({
            'stroke': '#303030',
            'stroke-linecap': 'round',
            'stroke-linejoin': 'round',
            'stroke-width': 2,
            'zIndex': 10
        })
        .translate(190, 61)
        .add(this.series[0].group); //it tried add path to a non-existing 3rd series

example: https://jsfiddle.net/v21zefzs/1/