Highcharts Gauge Chart with text labels

Question

i have a gauge charts with defined tick positions and want to show some text labels there. e. g.:

• -300 => Text 1
• -200 => Text 2
• -100 => Text 3
• ...

Is there a way to do that? Here's a fiddle of the chart.

jsfiddle.net/r8d3jnx6/

$('#container').highcharts({
            chart: {
                type: 'gauge',
                alignTicks: false,
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: null
            },

            tooltip: {
                enabled: false
            },

            pane: {
                startAngle: -70,
                endAngle: 70,
                background: null
            },

            plotOptions: {
                gauge: {
                    dial: {
                        baseWidth: 2,
                        baseLength: '100%',
                        radius: '100%',
                        rearLength: 0
                    },
                    pivot: {
                        radius: 5
                    },
                    dataLabels: {
                        enabled: false
                    }
                }
            },

            yAxis: [ {
                min: -300,
                max: 500,
                tickPositions: [-300, -200, -100, 0, 100, 200, 300, 400, 500],
                lineColor: '#933',
                lineWidth: 0,
                minorTickPosition: 'outside',
                tickLength: 0,
                minorTickLength: 0,
                labels: {
                    distance: 12,
                    //rotation: 'auto'
                },
                //categories: ['Grunder'],
                offset: 0,
                plotBands: [{
                    from: -300,
                    to: 2,
                    thickness: 15,
                    color: '#55BF3B'
                }, {
                    from: 0,
                    to: 202,
                    thickness: 15,
                    color: {
                        linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
                        stops: [
                            [0, '#55BF3B'], //green
                            [1, '#DDDF0D'] //yellow
                        ]
                    }
                }, {
                    from: 200,
                    to: 500,
                    thickness: 15,
                    color: {
                        linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
                        stops: [
                            [0, '#DDDF0D'], //yellow
                            [1, '#ff0000'] //red
                        ]
                    }
                }]
            }, {
                min: -200,
                max: 200,
                lineColor: '#339',
                tickColor: '#339',
                minorTickColor: '#339',
                offset: -100,
                lineWidth: 2,
                labels: {
                    enabled: false
                },
                tickLength: 5,
                minorTickLength: 5,
                endOnTick: false
            }],

            series: [{
                data: [250]
            }]
        });

Answer 1

You can use a yAxis.labels.formatter function to check what the label value is, and return a text of your choice depending on that value.

To take your example, it could look like this:

yAxis: {
    labels: {
        formatter: function() {
            if(this.value == -300) return '-300 => Text 1';
            if(this.value == -200) return '-200 => Text 2';
            if(this.value == -100) return '-100 => Text 3';
            return this.value;
    }
}

See this updated JSFiddle of how it works. As you can see you'll have to face the potential issue of labels overlapping the gauge, but you can fix that with distance, rotation and some other attributes (see API), depending on how your labels end up looking.