How to add annotation text to x and y axis in Highcharts?

Question

I have a bubble chart that needs to display annotation text to the x-axis and y-axis. I've put together an image to showcase what I am hoping to achieve by using the annotations:

Bubble Chart

I am new to this and would appreciate if anyone can help please.

https://jsfiddle.net/Sam786/qwormkt2/1/

let chart = Highcharts.chart('bubble_chart', {
            chart: {
                type: 'bubble',
                zoomType: 'xy'
            },
            title: { text: "" },
            xAxis: {
                title: {
                    text: "106. How disruptive has the COVID-19 pandemic been to your ability to do your work?"
                },
                plotLines: [{
                    value: 4,
                    color: 'darkgray',
                    dashStyle: 'shortdash',
                    width: 2,
                    valueDecimals: 2,
                    // label: {
                    //     text: 'SEC Avg',
                    // }
                    zIndex: -1
                }],
            },
            yAxis: {
                title: {
                    text: "107. How has your work demands changed because of the COVID-19 pandemic?"
                },
                plotLines: [{
                    value: 2.5,
                    color: 'darkgray',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'SEC Average',
                        verticalAlign: 'bottom'
                    }
                }]
            },
            credits: {enabled: false},
            tooltip: {
                useHTML: true,
                headerFormat: '',
                pointFormat:  '<strong>{point.org}</strong><br/>'+
                              'Respondents: <b>{point.z}</b><br/>'+
                              'X-Question Avg: <b>{point.x}</b><br/>'+
                              'Y-Question Avg: <b>{point.y}</b>',
                footerFormat: '',
                valueDecimals: 1
            },
            
            series: [{
                name: groups[0],
                color: Highcharts.getOptions().colors[0],
                data: []
            }, {
                name: groups[1],
                color: Highcharts.getOptions().colors[1],
                data: []
            }, {
                name: groups[2],
                color: Highcharts.getOptions().colors[2],
                data: []
            }]
        });

Answer 1

You can use SVGRenderer to draw shapes and text inside a chart. Here is an example from the official Highcharts forum: http://jsfiddle.net/ajxyuax2/1/

chart.renderer.text('Some text', 80, 80)
  .attr({ zIndex: 10 })
  .css({ fontSize: '12px'})
  .add();

chart.renderer.rect(75, 65, 135, 40, 2)
  .attr({
    'stroke-width': 2,
    stroke: 'black',
    fill: '#CEF74A',
    zIndex: 4
  })
  .add();

---

See the documentation of SVGRenderer for all available options. You can display text with the text method and you can draw a rectangle with the rect method.