Highcharts Funnel Chart Example

Keywords : Funnel chart using highcharts with example, How to use highcharts funnel chart to show data in funnel format with example, Highcharts funnel chart with different sizes of sections example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts - Funnel Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/funnel.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
          
            var chartype = {
                type: 'funnel',
                marginRight: 100
            }
            var chartitle = {
                text: 'Sales funnel',
                x: -50
            }
            var chartplotoptions = {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b> ({point.y:,.0f})',
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                        softConnector: true
                    },
                    neckWidth: '30%',
                    neckHeight: '25%'
                }
            }
            var chartlegend = {
                enabled: false
            }
            var chartseries = [{
                name: 'Unique users',
                data: [
                    ['Website visits', 15654],
                    ['Downloads', 4064],
                    ['Requested price list', 1987],
                    ['Invoice sent', 976],
                    ['Finalized', 846]
                ]
            }]
            $('#container').highcharts({
                chart:chartype,
                title: chartitle,
                plotOptions:chartplotoptions,
                legend:chartlegend,
                series: chartseries
            });
        });
    </script>
</head>
<body>
    <div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Highcharts Funnel Chart Example

Example

Result