I’m new to HighCharts. I have created a funnel with the below script
JavaScript
x
37
37
1
Highcharts.chart('container', {
2
chart: {
3
type: 'funnel'
4
},
5
title: {
6
text: 'Sales funnel'
7
},
8
plotOptions: {
9
series: {
10
dataLabels: {
11
enabled: true,
12
format: '<b>{point.name}</b> ({point.y:,.0f})',
13
softConnector: true,
14
inside: true,
15
},
16
neckHeight: "0%",
17
neckWidth: "80%",
18
width: '15%',
19
reversed: true,
20
}
21
},
22
legend: {
23
enabled: false
24
},
25
series: [{
26
name: 'Unique users',
27
data: [
28
['Website visits', 15654],
29
['Downloads', 4064],
30
['Requested price list', 1987],
31
['Invoice sent', 976],
32
['Finalized', 846]
33
]
34
}]
35
});
36
37
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:
JavaScript
1
26
26
1
plotOptions: {
2
series: {
3
dataLabels: {
4
format: '<b>{point.name}</b> ({point.realY:,.0f})',
5
6
},
7
8
}
9
},
10
tooltip: {
11
formatter: function() {
12
return this.series.name + '<br><span style="color:' + this.color + '">●</span> ' + this.point.name + ': <b>' + this.point.realY + '</b>';
13
}
14
},
15
series: [{
16
name: 'Unique users',
17
keys: ['name', 'y', 'realY'],
18
data: [
19
['Website visits', 1, 15654],
20
['Downloads', 1, 4064],
21
['Requested price list', 1, 1987],
22
['Invoice sent', 1, 976],
23
['Finalized', 1, 846]
24
]
25
}]
26
Live demo: https://jsfiddle.net/BlackLabel/e4b5o16d/
API Reference: https://api.highcharts.com/highcharts/series.funnel.data