Skip to content
Advertisement

How to add text on every section edges in funnel highcharts

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:

enter image description here

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.

Advertisement

Answer

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/

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement