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.
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 }) } } },