pls check the code. if i define a trial variable, and assigning value to it from a function, it is easily shown in the chart.but it is not works in my code.

export class AppComponent implements OnInit {
name = `Angular! v${VERSION.full}`;
@ViewChild("container", { read: ElementRef }) container: ElementRef;
trial:any;

constructor() {
this.function1();
}
ngOnInit(){
Highcharts.chart(this.container.nativeElement, {

chart: {
type: 'funnel'
},
title: {
text: 'Sales funnel'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
},
center: ['40%', '50%'],
neckWidth: '30%',
neckHeight: '25%',
width: '80%'
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', this.trial]
]
}]

});
}
function1()
{
this.trial=15;
}

Currently the funnel regions don't seem to react when the neck of the funnel gets smaller (neckWidth, neckHeight). I guess this means that the values decide the height of the region only, not the area of the region. This makes the chart less useful as the neck can't be adjusted to accommodate smaller conversion rates.

Would it be possible for the chart to intelligently calculate the *area* as per the neckWidth and neckHeight and decide how the regions are sized based on this?

I'm sorry, the ignoreHiddenPoint option is currently not implemented for funnels.

I cannot see this working in the demo.

See the example made out of demo http://jsfiddle.net/h3hc2vx9/

unselecting a legend item does not re-compile other data

Is it possible to make the funnel act like the pie so that when a legend is selected/unselected, the chart is updated without the selected related data ?

Hi Torstein,

I see that 3D charts are on your roadmap for Q1. Any chance Funnel chart would benefit from that as well?

I cannot get shadow to work with the funnel chart type. It's working just fine with any other chart type I've tested.

See http://api.highcharts.com/highcharts#tooltip.enabled

How to disable the tooltip?

Hi Torstein Hønsi, thanks for the reply. It works for me.

You can add it from a custom point property and include it in the dataLabel's format like so: http://jsfiddle.net/highcharts/T73kK/

For more fine-grained control, you are better off using a dataLabel formatter callback.

Hi, Am trying to display the data labels with sub categories or sub data labels, as shown in the following image in the link by using funnel chart of High Charts.

https://docs.google.com/file/d/0B2Xipj7JTuYhTGdpRmhabG1mT2M/edit?usp=sharing

Is it possible to do the same using High Charts ? If so, how to construct the data and input to the chart API?

Can anyone help me in this? Thanks in Advance.

I'm trying to get the shadow on the funnel, but it's not working. I've tested with the fiddle setting shadow: true in the plotArea, but it doesn't seem to do anything. None of the other plotArea settings seem to effect the chart either.

I'm sorry, the docs aren't written yet. You can find some comments inline in the example.

Is there any api documentation for the funnel chart. I need to set minimum height for the each segment.

Thanks, fixed it now

Looks like the JS source files are broken in http://jsfiddle.net/highcharts/JvY4s/

Hi Kevin, there are several features of this chart, perhaps we can discuss each one of them. We are open for suggestions.

a) 3D. The funnel in the image is tilted and viewed askew from above. This is not currently planned for our funnel. But there's a separate feature request for 3D. If we implement this in the future, the funnel will be affected as well.

b) Gradients. Part of the 3D effect (apart from the perspective) is achieved by gradients. Highcharts currently doesn't support the skewed gradients required for the funnel effect, though we can create a simple linear gradient: http://jsfiddle.net/highcharts/JvY4s/996/. We may be able to create this funnel effect.

c) Your image has a distance between the points. I think this is a good idea, and it would be easy to implement. Looking at Google images, this is fairly common.

d) In your image, there is not a sharp break between the neck and the funnel. Instead, each "point" has its own funnel angle. This seems to be fairly common.

Torstein, any thoughts about making the funnel chart a little more rounded? Similar to, http://peltiertech.com/WordPress/wp-content/img200806/FusionFunnel3a.png

Hi, is it possible to implement any fix for this issue? http://jsfiddle.net/JvY4s/815/
See last slices (6 and 7)

For example if slice has not enough height to display the text, text could be hidden at all.
Or simply display labels in separate box how they are displayed here http://jsfiddle.net/sN2HA/1/

One year and no updates, this prevent many people to use your product.