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.
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