I’m new to HighCharts. I have created a funnel with the below script
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] ] }] });
jsfiddle: https://jsfiddle.net/kiranuk/bavLxzrp/
How can I set equal heights for all the sections?.
Thanks for the help.
Advertisement
Answer
A height of a section is calculated based on data. If you want to have equal sections, you can provide mocked equal data and show the real data in a tooltip and data-labels. For example:
plotOptions: { series: { dataLabels: { format: '<b>{point.name}</b> ({point.realY:,.0f})', ... }, ... } }, tooltip: { formatter: function() { return this.series.name + '<br><span style="color:' + this.color + '">●</span> ' + this.point.name + ': <b>' + this.point.realY + '</b>'; } }, series: [{ name: 'Unique users', keys: ['name', 'y', 'realY'], data: [ ['Website visits', 1, 15654], ['Downloads', 1, 4064], ['Requested price list', 1, 1987], ['Invoice sent', 1, 976], ['Finalized', 1, 846] ] }]
Live demo: https://jsfiddle.net/BlackLabel/e4b5o16d/
API Reference: https://api.highcharts.com/highcharts/series.funnel.data