Highcharts - Funnel

by Ben Clayton

HTML

<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/funnel.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<script src="//code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 360px;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
}
.pn {
	line-height:20px;
}
.pv {
	line-height:20px;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'funnel'
    },
    title: {
        text: 'Sales funnel'
    },
    plotOptions: {
        series: {
            dataLabels: {
								verticalAlign:"middle",
                enabled: true,
                inside:true,
								XXXuseHTML:true,
								format: '{point.name} - {point.y:,.0f}'

            }
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'People Count',
        data: [
            ['Attract', 100],
            ['Engage', 45],
            ['Sell', 25],
            ['Sold', 15]
        ]
    }],

});