How to add text on every section edges in funnel highcharts

Question

With help of my previous question, I'm able to set equal heights for all the sections to the funnel. How can I add some extra texts to the edges(right) of every section. I did not find any documentation for this. My expected funnel chart as follows:

Highcharts.chart('container', {
    chart: {
        type: 'funnel'
    },
    title: {
        text: 'Sales funnel'
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b> ({point.y:,.0f})',
                softConnector: true,
                inside: true,
            },
            neckHeight: "0%",
                neckWidth: "80%",
                width: '15%',
                reversed: true,
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
        ]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                plotOptions: {
                    series: {
                        dataLabels: {
                            inside: true
                        },
                        center: ['50%', '50%'],
                        width: '100%'
                    }
                }
            }
        }]
    }
});

jsfiddle Example: https://jsfiddle.net/kiranuk/xhfbyj64/

Thanks for the help.

Answer 1

For adding extra text on the chart use Highcharts. SVGRenderer

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Sample code:

  chart: {
    type: 'funnel',
    events: {
      render: function() {
        let chart = this,
          point1 = chart.series[0].points[4],
          x = point1.dlBox.x + point1.dlBox.bottomWidth + chart.plotLeft + 1,
          y = point1.dlBox.y + chart.plotTop - point1.dlBox.height;

        if (!chart.myCustomText) {
          chart.myCustomText = chart.renderer
            .text('1% <br> Did')
            .css({
              fontSize: '10px',
              zIndex: '3px'
            })
            .add();
        }

        //pdate text coordinates
        chart.myCustomText.attr({
          x: x,
          y: y
        })
      }
    }
  },

Demo: https://jsfiddle.net/BlackLabel/kLyt6ngs/