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:
JavaScript
x
55
55
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
responsive: {
37
rules: [{
38
condition: {
39
maxWidth: 500
40
},
41
chartOptions: {
42
plotOptions: {
43
series: {
44
dataLabels: {
45
inside: true
46
},
47
center: ['50%', '50%'],
48
width: '100%'
49
}
50
}
51
}
52
}]
53
}
54
});
55
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:
JavaScript
1
28
28
1
chart: {
2
type: 'funnel',
3
events: {
4
render: function() {
5
let chart = this,
6
point1 = chart.series[0].points[4],
7
x = point1.dlBox.x + point1.dlBox.bottomWidth + chart.plotLeft + 1,
8
y = point1.dlBox.y + chart.plotTop - point1.dlBox.height;
9
10
if (!chart.myCustomText) {
11
chart.myCustomText = chart.renderer
12
.text('1% <br> Did')
13
.css({
14
fontSize: '10px',
15
zIndex: '3px'
16
})
17
.add();
18
}
19
20
//pdate text coordinates
21
chart.myCustomText.attr({
22
x: x,
23
y: y
24
})
25
}
26
}
27
},
28