First time ever working with JS and HighCharts... But I'll try to formulate a question so it'll make sense!

At the moment I'm working with only 4 sources of data, which is incredibly easy to throw right in to highcharts.

The problem is, the 4 aggregated numbers is... well, not very consistent.

The numbers I have atm is: 349531093, 156777100, 572480, 7 and 0.

The first number and the second covers the whole funnel, which makes the plot very unattractive and hard to visually see the values. (Yeah, yeah - the labels are brilliant, but I want to be able to visually see each section).

I've been reading through the documentation of the funnel plot, but I cannot find a way to limit the section size in any way.

So I tried to play around a bit with the different kind of limits, like:

• minSize - The minimum size for a pie in response to auto margins. The pie will try to shrink to make room for data labels in side the plot area, but only to this size. (which does exactly what it says, so I'm not sure why I even tried it...)

• size - that ofc just changed the size of the whole chart....

 series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b> ({point.y:,.0f})',                    
                minSize: '10%',
                color: 'black',
                softConnector: true
            },
            neckWidth: '50%',
            neckHeight: '50%',
            minSize: '20%',
           
            //-- Other available options
            height: '200'
            // width: pixels or percent
        }

You can see my horrible attempt here at it here: JSFiddle thingy

So to the actual question: Is it possible to set an minimum limit for the section in the funnel?

Any suggestions or just a simple: "dude, not possible" is appreciated!

Cheers!

First time ever working with JS and HighCharts... But I'll try to formulate a question so it'll make sense!

At the moment I'm working with only 4 sources of data, which is incredibly easy to throw right in to highcharts.

The problem is, the 4 aggregated numbers is... well, not very consistent.

The numbers I have atm is: 349531093, 156777100, 572480, 7 and 0.

The first number and the second covers the whole funnel, which makes the plot very unattractive and hard to visually see the values. (Yeah, yeah - the labels are brilliant, but I want to be able to visually see each section).

I've been reading through the documentation of the funnel plot, but I cannot find a way to limit the section size in any way.

So I tried to play around a bit with the different kind of limits, like:

• minSize - The minimum size for a pie in response to auto margins. The pie will try to shrink to make room for data labels in side the plot area, but only to this size. (which does exactly what it says, so I'm not sure why I even tried it...)

• size - that ofc just changed the size of the whole chart....

 series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b> ({point.y:,.0f})',                    
                minSize: '10%',
                color: 'black',
                softConnector: true
            },
            neckWidth: '50%',
            neckHeight: '50%',
            minSize: '20%',
           
            //-- Other available options
            height: '200'
            // width: pixels or percent
        }

You can see my horrible attempt here at it here: JSFiddle thingy

So to the actual question: Is it possible to set an minimum limit for the section in the funnel?

Any suggestions or just a simple: "dude, not possible" is appreciated!

Cheers!

• javascript
• highcharts

3 Answers 3

Unfortunately this is not supported (good idea to post this on userVoice!)

However I have created simple example that you can preprocess data and still display proper values: https://jsfiddle/69eey/2/

$(function () {
var dataEx = [
            ['Raw Events', 349531093],
            ['Filtered/Aggregated Events',       156777100],
            ['Correlated Events', 2792294],
            ['Use Case Events',    572480],
            ['Finalized',    0]
        ],
    len = dataEx.length,
    sum = 0,
    minHeight = 0.05, 
    data = [],
    i;

for(i = 0; i < len; i++){
    sum += dataEx[i][1];
}

for(i = 0; i < len; i++){
    var t = dataEx[i],
        r = t[1] / sum;
    data[i] = {
        name: t[0],
        y: ( r > minHeight ? t[1]  : sum * minHeight ),
        label: t[1]
    }
}

It is only workaround of course. You also need to use formatter for a tooltip to make sure you will display proper values (like for dataLabels).

I took Paweł Fus's great example and extended it to include the tooltip correction. Just add the snippet below:

tooltip: {
    formatter: function() {
        return '<b>'+ this.key  +
            '</b> = <b>'+ Highcharts.numberFormat(this.point.label, 0) +'</b>';
    }
},

JSFiddle with a working example:

HTML

<script src="http://code.highcharts./highcharts.js"></script>
<script src="http://code.highcharts./modules/funnel.js"></script>
<script src="http://code.highcharts./modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var dataEx = [
                ['Raw Events', 349531093],
                ['Filtered/Aggregated Events',       156777100],
                ['Correlated Events', 2792294],
                ['Use Case Events',    572480],
                ['Finalized',    0]
            ],
        len = dataEx.length,
        sum = 0,
        minHeight = 0.05,
        data = [];
    
    for(var i = 0; i < len; i++){
        sum += dataEx[i][1];
    }
    
    for(var i = 0; i < len; i++){
        var t = dataEx[i],
            r = t[1] / sum;
        data[i] = {
            name: t[0],
            y: ( r > minHeight ? t[1]  : sum * minHeight ),
            label: t[1]
        }
    }
    $('#container').highcharts({
        chart: {
            type: 'funnel',
            marginRight: 100
        },
        title: {
            text: 'SEIM Metrics',
            x: -50
        },
        tooltip: {
            //enabled: false
            formatter: function() {
                return '<b>'+ this.key  +
                    '</b> = <b>'+ Highcharts.numberFormat(this.point.label, 0) +'</b>';
            }
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    formatter: function(){
                      var point = this.point;  
                        console.log(point);
                      return '<b>' + point.name + '</b> (' + Highcharts.numberFormat(point.label, 0) + ')'; 
                    },                
                    minSize: '10%',
                    color: 'black',
                    softConnector: true
                },
                neckWidth: '50%',
                neckHeight: '50%',
                //-- Other available options
                height: '200'
                // width: pixels or percent
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Unique users',
            data: data
        }]
    });
});

You can try normalizing the values first by taking log.

• log(349531093)=8.5
• log(572480)=5.75